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. nginx介绍（三） 配置篇

    3. nginx配置 nginx配置系统受益于Igor Sysoev(nginx创始人)在Apache(阿帕奇软件基金会)的经历.Igor Sysoev洞察出可扩展的配置系统对于一个web服务器来说是 ...

  2. VueJs(11)---vue-router（命名路由，命名视图，重定向别名，路由组件传参）

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  3. 【云服务器部署】---Linux下安装nginx

    [云服务器部署]---Linux下安装nginx 之前两篇,分别讲了:Linux下安装MySQL  和  springboot项目部署云服务器 nginx安装也是挺简单的.具体步骤如下: 第一步,下载 ...

  4. Ambari集群移动现有复制到另外地方或更改ip地址，导致各项服务组件上为黄色问号代表心跳丢失的解决方案（图文详解）（博主推荐）

    前言 最近,是在做集群搬移工作,大家肯定会遇到如下的场景. (1) 比如,你新购买的电脑,初步者学习使用Ambari集群.从旧电脑复制到新电脑这边来. (2) 比如,你公司Ambari集群的ip,因业 ...

  5. Spring Boot - 获取所有的Bean信息

    前言 Spring Boot启动的时候需要加载许多Bean实现最小化配置,本文将尝试找出Spring启动后加载的所有Bean信息: 通过ApplicationContext 去获取所有的Bean 通过 ...

  6. 经典中的品味：第二章 C++基本的对象,类型和值（上）

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 自律,是以积极而主动的态度,去解决人生的痛苦~ 上一章,我们大谈了Hel ...

  7. 项目ITP(五) spring4.0 整合 Quartz 实现任务调度

    前言 系列文章:[传送门] 项目需求: 二维码推送到一体机上,给学生签到扫描用.然后需要的是 上课前20分钟 ,幸好在帮带我的学长做 p2p 的时候,接触过.自然 quartz 是首选.所以我就配置了 ...

  8. PHP源码阅读(一)：str_split函数

    注:源码版本:php5.6.33. 函数简介 str_split 原型: array str_split ( string $string [, int $split_length = 1 ] ) 说 ...

  9. Java集合：整体结构

    一.Java中集合 Java中集合类是Java编程中使用最频繁.最方便的类.集合类作为容器类可以存储任何类型的数据,当然也可以结合泛型存储指定的类型(不过泛型仅仅在编译期有效,运行时是会被擦除的).集 ...

  10. Java生成sitemap网站地图

    访问我的博客 sitemap 是什么?对应没有接触过网站 SEO 的同学可能不知道,这里引用一下百度站长的一段解释. Sitemap(即站点地图)就是您网站上各网页的列表.创建并提交Sitemap有助 ...