Swiper4.x使用方法

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<!DOCTYPE html>

<html>

<head>

    ...

    <link rel="stylesheet" href="path/to/swiper.min.css">

</head>

<body>

    ...

    <script src="path/to/swiper.min.js"></script>

</body>

</html>

2.HTML内容。

<div class="swiper-container">

    <div class="swiper-wrapper">

        <div class="swiper-slide">Slide </div>

        <div class="swiper-slide">Slide </div>

        <div class="swiper-slide">Slide </div>

    </div>

    <!-- 如果需要分页器 -->

    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->

    <div class="swiper-button-prev"></div>

    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->

    <div class="swiper-scrollbar"></div>

</div>

导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {

    width: 600px;

    height: 300px;

}

4.初始化Swiper：最好是挨着</body>标签

<script>

  var mySwiper = new Swiper ('.swiper-container', {

    direction: 'vertical',

    loop: true,

    // 如果需要分页器

    pagination: {

      el: '.swiper-pagination',

    },

    // 如果需要前进后退按钮

    navigation: {

      nextEl: '.swiper-button-next',

      prevEl: '.swiper-button-prev',

    },

    // 如果需要滚动条

    scrollbar: {

      el: '.swiper-scrollbar',

    },

  })

  </script>

</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script type="text/javascript">

window.onload = function() {

  ...

}

</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">

$(document).ready(function () {

 ...

})

</script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。

swiper坑

1.一个页面引用多个swiper插件，出现混乱问题；

　　解决方法： 1.实例化swiper时加上其父元素加以区分

　　　　　　　 2.Swiper加上ID或Class区分，要保留默认的类名swiper-container

　　如下：

<script>

            var swiper = new Swiper('.course_banner2 .swiper-container', {

                pagination: '.course_banner2 .swiper-pagination',

                paginationClickable: true,

                loop: true,

                autoplay:

            });

            </script>

2. swiper隐藏之后，再显示，滑动不流畅，且无限滑动会失败；

　　解决方法： 添加一下两个属性　　　

　　　　observer: true,//修改swiper自己或子元素时，自动初始化swiper
　　　　observeParents: true,//修改swiper的父元素时，自动初始化swiper

3.动态生成的swiper，如append()，或html()添加的，无限滑动效果失败；

　　解决方法：

　　　　a. 添加上面两个属性

　　　　b.把swiper方法写在动态生成的方法里面

　　如下所示：

function bigPic(comment_id) {

        $('.win_pic').show();

        $.post("{:U('Course/ajaxComment')}", {'c_id':comment_id}, function(data){

            if(data.status == ){

                $("#content").text(data.comment.c_content);

                $(".swiper-wrapper").html('');

                var html = '';

                var images = data.comment.images;

                for (var i=; i < images.length; i++) {

                    html += "<div class='swiper-slide'><img src=__ROOT__/" + images[i]['thumb_image'] + "></div>";

                }

                $(".swiper-wrapper").html(html); //swiper已动态生成

                //实例化swiper

                var swiper = new Swiper('.nav .swiper-container', {

                    pagination: '.nav .swiper-pagination',

                    paginationClickable: true,

                    centeredSlides: true,

                    autoplay: false,

                    autoplayDisableOnInteraction: false,

                    paginationType: 'fraction',

                    observer: true,//修改swiper自己或子元素时，自动初始化swiper

                    observeParents: true,//修改swiper的父元素时，自动初始化swiper

                    loop: true,

                    paginationFractionRender: function(swiper, currentClassName, totalClassName) {

                        return '<span class="' + currentClassName + '"></span>' +

                            '/' +

                            '<span class="' + totalClassName + '"></span>';

                    }

                })

            }

            console.log(data);

        }, "json");

    }

4.移动端使用swiper需加onTouchStart、onTouchEnd，下拉时轮播停止BUG。（针对 apicloud 开发)

var swiper = new Swiper('.swiper-container', {

        pagination: '.swiper-pagination',

        loop: true,

        paginationClickable: true,

        centeredSlides: true,

        autoplay: ,

        autoplayDisableOnInteraction: false,

        onTouchStart: function(swiper) {

                api.setFrameAttr({

                    name: api.frameName,

                    bounces: false

                });

            },

        onTouchEnd: function(swiper) {

                api.setFrameAttr({

                    name: api.frameName,

                    bounces: true

                });

            }

    });

官网网址:http://www.swiper.com.cn/

(网页)swiper.js轮播图插件的更多相关文章

  1. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  2. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  3. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  4. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  5. js 原生轮播图插件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  7. vue轮播图插件vue-awesome-swiper的使用与组件化

    不管是APP还是移动端网页开发,轮播图在大部分项目当中都是存在的,这时候如果用vue开发项目,选择一款好的插件并且封装好是很重要的 1. 推荐使用vue-awesome-swiper 安装:cnpm ...

  8. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  9. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

随机推荐

  1. C# 结合 using 语句块的三种实用方法

    一.简介 阅读 Abp 源码的过程中,自己也学习到了一些之前没有接触过的知识.在这里,我在这儿针对研究学习 Abp 框架中,遇到的一些值得分享的知识写几篇文章.如果有什么疑问或者问题,欢迎大家评论指正 ...

  2. 课程五(Sequence Models)，第二 周（Natural Language Processing & Word Embeddings） —— 0.Practice questions：Natural Language Processing & Word Embeddings

    [解释] The dimension of word vectors is usually smaller than the size of the vocabulary. Most common s ...

  3. 【python】版本35 正则-非库-爬虫-读写xlw文件

    #交代:代码凌乱,新手一个,论坛都是高手,我也是鼓了很大勇气,发出来就是被批评和进步的   #需求:需要对某网站的某id子标签批量爬取,每个网页的id在xlw里,爬取完,再批量存取到这xlw里的第6行 ...

  4. python装饰器3：进阶

    装饰器1:函数装饰器 装饰器2:类装饰器 装饰器3:进阶 函数装饰器装饰方法 函数装饰器装饰普通函数已经很容易理解了: @decorator def func():... #等价于 def func( ...

  5. TCP三次握手与Tcpdump抓包分析过程

    一.TCP连接建立(三次握手) 过程 客户端A,服务器B,初始序号seq,确认号ack 初始状态:B处于监听状态,A处于打开状态 A -> B : seq = x (A向B发送连接请求报文段,A ...

  6. fiddler抓取https请求（android/ios）

    本文转载自:http://blog.csdn.net/songer_xing/article/details/53841401 备注:本人有这样的一个需求,先记录下,以后再进行整理. 在抓包过程中发现 ...

  7. 适用于WebApi的SQL注入过滤器

    开发工具:Visual Studio 2017 C#版本:C#7.1 最有效的防止SQL注入的方式是调用数据库时使用参数化查询. 但是如果是接手一个旧的WebApi项目,不想改繁多的数据库访问层的代码 ...

  8. 【转载】 Sqlserver中DateAdd()函数

    在Sqlserver数据库中,DATEADD() 函数在日期中添加或减去指定的时间间隔.例如计算当前时间往后一天的时刻以及往前1天的时刻时间即可使用DateAdd()函数来操作,DateAdd()函数 ...

  9. Revit二次开发： 文件损坏

    哪些因素可能会导致损坏? 损坏的原因也各不相同,包括但不限于 无法读取/写入存储介质 程序发生崩溃(特别是在数据写入 RVT 模型时) 附加模块以通过正常 UI 无法或意外的方式修改图元 未经测试的多 ...

  10. [Linux] Nginx 提供静态内容和优化积压队列

    1.try_files指令可用于检查指定的文件或目录是否存在; NGINX会进行内部重定向,如果没有,则返回指定的状态代码.例如,要检查对应于请求URI的文件是否存在,请使用try_files指令和$ ...