最近，苦恼于各种轮播的需求，每个自己都要自己写，写的挺烦的。终于，在网上发现了swiper插件，发现还是挺实用的，但其中还是踩过了不少的坑，其中有不少都是很简单的问题，但到发现的时候都是花了不少时间，特此做个分享。

Banner轮播图1

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.    <meta charset="utf-8">
  5.    <title>Swiper demo</title>
  6.    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  7.  
  8.    <!-- Link Swiper's CSS -->
  9.    <link rel="stylesheet" href="./css/swiper.min.css">
  10.  
  11.    <!-- Demo styles -->
  12.    <style>
  13.      html, body {
  14.        position: relative;
  15.        height: 100%;
  16.      }
  17.      body {
  18.        background: #eee;
  19.        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  20.        font-size: 14px;
  21.        color:#000;
  22.        margin: 0;
  23.        padding: 0;
  24.      }
  25.      .swiper-container {
  26.        width: 100%;
  27.        height: 100%;
  28.        margin-left: auto;
  29.        margin-right: auto;
  30.      }
  31.      .swiper-slide {
  32.        text-align: center;
  33.        font-size: 18px;
  34.        background: #fff;
  35.  
  36.        /* Center slide text vertically */
  37.        display: -webkit-box;
  38.        display: -ms-flexbox;
  39.        display: -webkit-flex;
  40.        display: flex;
  41.        -webkit-box-pack: center;
  42.        -ms-flex-pack: center;
  43.        -webkit-justify-content: center;
  44.        justify-content: center;
  45.        -webkit-box-align: center;
  46.        -ms-flex-align: center;
  47.        -webkit-align-items: center;
  48.        align-items: center;
  49.      }
  50.    </style>
  51.  </head>
  52.  <body>
  53.    <!-- Swiper -->
  54.    <div class="swiper-container">
  55.      <div class="swiper-wrapper">
  56.        <div class="swiper-slide">Slide 1</div>
  57.        <div class="swiper-slide">Slide 2</div>
  58.        <div class="swiper-slide">Slide 3</div>
  59.        <div class="swiper-slide">Slide 4</div>
  60.        <div class="swiper-slide">Slide 5</div>
  61.        <div class="swiper-slide">Slide 6</div>
  62.        <div class="swiper-slide">Slide 7</div>
  63.        <div class="swiper-slide">Slide 8</div>
  64.        <div class="swiper-slide">Slide 9</div>
  65.        <div class="swiper-slide">Slide 10</div>
  66.      </div>
  67.      <!-- Add Pagination -->
  68.      <div class="swiper-pagination"></div>
  69.      <!-- Add Arrows -->
  70.      <div class="swiper-button-next"></div>
  71.      <div class="swiper-button-prev"></div>
  72.    </div>
  73.  
  74.    <!-- Swiper JS -->
  75.    <script src="./js/swiper.js"></script>
  76.  
  77.    <!-- Initialize Swiper -->
  78.    <script>
  79.      var swiper = new Swiper('.swiper-container', {
  80.        slidesPerView: 1,
  81.        spaceBetween: 30,
  82.        loop: true,
  83.        pagination: {
  84.          el: '.swiper-pagination',
  85.          clickable: true,
  86.        },
  87.      // 开启自动切换
  88.        autoplay: true,
  89.        navigation: {
  90.          nextEl: '.swiper-button-next',
  91.          prevEl: '.swiper-button-prev',
  92.        },
  93.      });
  94.    </script>
  95.  </body>
  96.  </html>

但是，这个autoplay属性有问题，在轮播中触摸滑动之后就不在轮播，这不是我想要的。于是，我看了api文档，发现disableOnInteraction为true,用户操作swiper之后，禁止autoplay

  1. autoplay:true 等价于
  2. autoplay：{
  3.     delay: 3000,
  4.     stopOnLastSlide: false,
  5.     disableOnInteraction: true,
  6. }

一行多个slide轮播，tap切换 2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Swiper demo</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  8.  
  9.     <!-- Link Swiper's CSS -->
  10.     <link rel="stylesheet" href="./css/swiper.min.css">
  11.  
  12.     <!-- Demo styles -->
  13.     <style>
  14.         html,
  15.         body {
  16.             position: relative;
  17.             height: 100%;
  18.         }
  19.  
  20.         body {
  21.             background: #eee;
  22.             font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  23.             font-size: 14px;
  24.             color: #000;
  25.             margin: 0;
  26.             padding: 0;
  27.         }
  28.  
  29.         .container {
  30.             width: 500px;
  31.             margin: 0 auto;
  32.         }
  33.  
  34.         .swiper-container {
  35.             width: 500px;
  36.             height: 500px;
  37.             margin-left: auto;
  38.             margin-right: auto;
  39.         }
  40.  
  41.         .swiper-slide {
  42.             text-align: center;
  43.             font-size: 18px;
  44.             background: #fff;
  45.  
  46.             /* Center slide text vertically */
  47.             display: -webkit-box;
  48.             display: -ms-flexbox;
  49.             display: -webkit-flex;
  50.             display: flex;
  51.             -webkit-box-pack: center;
  52.             -ms-flex-pack: center;
  53.             -webkit-justify-content: center;
  54.             justify-content: center;
  55.             -webkit-box-align: center;
  56.             -ms-flex-align: center;
  57.             -webkit-align-items: center;
  58.             align-items: center;
  59.         }
  60.  
  61.         .tap {
  62.             display: flex;
  63.             justify-content: space-evenly;
  64.         }
  65.  
  66.         .tap span {
  67.             display: inline-block;
  68.             width: 50px;
  69.             height: 50px;
  70.             border: 1px solid #000;
  71.             text-align: center;
  72.             line-height: 50px;
  73.             background-color: white;
  74.         }
  75.  
  76.         .hide {
  77.             position: absolute;
  78.             visibility: hidden;
  79.             height: 0;
  80.         }
  81.  
  82.         .show {
  83.             color: #e5256e;
  84.             background-color: #fff;
  85.         }
  86.     </style>
  87. </head>
  88.  
  89. <body>
  90.     <div class="container">
  91.         <!-- Swiper -->
  92.         <div class="tap">
  93.             <span class="show">1</span>
  94.             <span>2</span>
  95.             <span>3</span>
  96.         </div>
  97.         <div id="lunbo">
  98.             <div class="img1">
  99.                 <div class="swiper-container img1-1">
  100.                     <div class="swiper-wrapper">
  101.                         <div class="swiper-slide">Slide 1</div>
  102.                         <div class="swiper-slide">Slide 2</div>
  103.                         <div class="swiper-slide">Slide 3</div>
  104.                         <div class="swiper-slide">Slide 4</div>
  105.                         <div class="swiper-slide">Slide 5</div>
  106.                         <div class="swiper-slide">Slide 6</div>
  107.                         <div class="swiper-slide">Slide 7</div>
  108.                         <div class="swiper-slide">Slide 8</div>
  109.                         <div class="swiper-slide">Slide 9</div>
  110.                         <div class="swiper-slide">Slide 10</div>
  111.                     </div>
  112.                 </div>
  113.             </div>
  114.             <div class="img2 hide">
  115.                 <div class="swiper-container img2-1">
  116.                     <div class="swiper-wrapper">
  117.                         <div class="swiper-slide">Slide 21</div>
  118.                         <div class="swiper-slide">Slide 22</div>
  119.                         <div class="swiper-slide">Slide 23</div>
  120.                         <div class="swiper-slide">Slide 24</div>
  121.                         <div class="swiper-slide">Slide 25</div>
  122.                         <div class="swiper-slide">Slide 26</div>
  123.                         <div class="swiper-slide">Slide 27</div>
  124.                         <div class="swiper-slide">Slide 28</div>
  125.                         <div class="swiper-slide">Slide 29</div>
  126.                         <div class="swiper-slide">Slide 210</div>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.             <div class="img3 hide">
  131.                 <div class="swiper-container img3-1">
  132.                     <div class="swiper-wrapper">
  133.                         <div class="swiper-slide">Slide 31</div>
  134.                         <div class="swiper-slide">Slide 32</div>
  135.                         <div class="swiper-slide">Slide 33</div>
  136.                         <div class="swiper-slide">Slide 34</div>
  137.                         <div class="swiper-slide">Slide 35</div>
  138.                         <div class="swiper-slide">Slide 36</div>
  139.                         <div class="swiper-slide">Slide 37</div>
  140.                         <div class="swiper-slide">Slide 38</div>
  141.                         <div class="swiper-slide">Slide 39</div>
  142.                         <div class="swiper-slide">Slide 310</div>
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.         </div>
  147.     </div>
  148.  
  149.     <!-- Swiper JS -->
  150.     <script src="./js/jquery.min.js"></script>
  151.     <script src="./js/swiper.js"></script>
  152.  
  153.     <!-- Initialize Swiper -->
  154.     <script>
  155.         var swiper1 = new Swiper('.img1-1', {
  156.             slidesPerView: 3,
  157.             spaceBetween: 30,
  158.             loop: true,
  159.             // 开启自动切换
  160.             autoplay: {
  161.                 delay: 3000,
  162.                 stopOnLastSlide: false,
  163.                 disableOnInteraction: false,
  164.             },
  165.         });
  166.  
  167.         var swiper2 = new Swiper('.img2-1', {
  168.             slidesPerView: 3,
  169.             spaceBetween: 30,
  170.             loop: true,
  171.             // 开启自动切换
  172.             autoplay: {
  173.                 delay: 3000,
  174.                 stopOnLastSlide: false,
  175.                 disableOnInteraction: false,
  176.             },
  177.         });
  178.  
  179.         var swiper3 = new Swiper('.img3-1', {
  180.             slidesPerView: 3,
  181.             spaceBetween: 30,
  182.             loop: true,
  183.             // 开启自动切换
  184.             autoplay: {
  185.                 delay: 3000,
  186.                 stopOnLastSlide: false,
  187.                 disableOnInteraction: false,
  188.             },
  189.         });
  190.  
  191.         $(".tap span").click(function () {
  192.             var index = $(this).index();
  193.             $("#lunbo").children("div").eq(index).removeClass("hide").siblings().addClass("hide");
  194.             $(this).addClass("show").siblings().removeClass("show");
  195.         })
  196.  
  197.     </script>
  198. </body>
  199.  
  200. </html>

注意，切换多个轮播的时候，不要使用display:none，建议使用visibility: hidden。一开始使用了display:none，出现各种问题，样式变了，轮播失效，加了监视器也只是样式好了，轮播依旧失效。

匀速无缝轮播3

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.    <meta charset="utf-8">
  5.    <title>Swiper demo</title>
  6.    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  7.  
  8.    <!-- Link Swiper's CSS -->
  9.    <link rel="stylesheet" href="./css/swiper.min.css">
  10.  
  11.    <!-- Demo styles -->
  12.    <style>
  13.      html, body {
  14.        position: relative;
  15.        height: 100%;
  16.      }
  17.      body {
  18.        background: #eee;
  19.        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  20.        font-size: 14px;
  21.        color:#000;
  22.        margin: 0;
  23.        padding: 0;
  24.      }
  25.      .swiper-container {
  26.        width: 100%;
  27.        height: 100%;
  28.        margin-left: auto;
  29.        margin-right: auto;
  30.      }
  31.      .swiper-slide {
  32.        text-align: center;
  33.        font-size: 18px;
  34.        background: #fff;
  35.  
  36.        /* Center slide text vertically */
  37.        display: -webkit-box;
  38.        display: -ms-flexbox;
  39.        display: -webkit-flex;
  40.        display: flex;
  41.        -webkit-box-pack: center;
  42.        -ms-flex-pack: center;
  43.        -webkit-justify-content: center;
  44.        justify-content: center;
  45.        -webkit-box-align: center;
  46.        -ms-flex-align: center;
  47.        -webkit-align-items: center;
  48.        align-items: center;
  49.      }
  50.  
  51.      .swiper-container-free-mode>.swiper-wrapper {
  52.          -webkit-transition-timing-function: linear;
  53.          -moz-transition-timing-function: linear;
  54.          -ms-transition-timing-function: linear;
  55.          -o-transition-timing-function: linear;
  56.          transition-timing-function: linear;
  57.          margin: 0 auto;
  58.     }
  59.  
  60.    </style>
  61.  </head>
  62.  <body>
  63.    <!-- Swiper -->
  64.    <div class="swiper-container">
  65.      <div class="swiper-wrapper">
  66.        <div class="swiper-slide">Slide 1</div>
  67.        <div class="swiper-slide">Slide 2</div>
  68.        <div class="swiper-slide">Slide 3</div>
  69.        <div class="swiper-slide">Slide 4</div>
  70.        <div class="swiper-slide">Slide 5</div>
  71.        <div class="swiper-slide">Slide 6</div>
  72.        <div class="swiper-slide">Slide 7</div>
  73.        <div class="swiper-slide">Slide 8</div>
  74.        <div class="swiper-slide">Slide 9</div>
  75.        <div class="swiper-slide">Slide 10</div>
  76.      </div>
  77.      <!-- Add Pagination -->
  78.      <div class="swiper-pagination"></div>
  79.      <!-- Add Arrows -->
  80.      <div class="swiper-button-next"></div>
  81.      <div class="swiper-button-prev"></div>
  82.    </div>
  83.  
  84.    <!-- Swiper JS -->
  85.    <script src="./js/swiper.js"></script>
  86.  
  87.    <!-- Initialize Swiper -->
  88.    <script>
  89.      var swiper = new Swiper('.swiper-container', {
  90.        slidesPerView: 3,
  91.        spaceBetween: 30,
  92.        loop: true,
  93.        pagination: {
  94.          el: '.swiper-pagination',
  95.          clickable: true,
  96.        },
  97.        speed:2000,
  98.        freeMode: true,
  99.      // 开启自动切换
  100.        autoplay:{
  101.          delay: 0,
  102.          stopOnLastSlide: false,
  103.          disableOnInteraction: false,
  104.        },
  105.      });
  106.    </script>
  107.  </body>
  108.  </html>

匀速轮播

只要delay设为0，freeMode为true，覆盖样式.swiper-container-free-mode>.swiper-wrapper即可

swiper踩过的哪些坑的更多相关文章

  1. 三分之一的程序猿之社交类app踩过的那些坑

    三分之一的程序猿之社交类app踩过的那些坑 万众创新,全民创业.哪怕去年陌生人社交不管融资与否都倒闭了不知道多少家,但是依然有很多陌生人社交应用层出不穷的冒出来.各种脑洞大开,让人拍案叫起. 下面我们 ...

  2. 【Fine原创】JMeter分布式测试中踩过的那些坑

    最近因为项目需要,研究了性能测试的相关内容,并且最终选用了jmeter这一轻量级开源工具.因为一直使用jmeter的GUI模式进行脚本设计,到测试执行阶段工具本身对资源的过量消耗给性能测试带来了瓶颈, ...

  3. 与webview打交道中踩过的那些坑

    随着HTML5被越来越多的用到web APP的开发当中,webview这一个神器便日渐凸显出重要地位.简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码 ...

  4. 美团在Redis上踩过的一些坑-目录（本人非美团）（转）

    来自:http://carlosfu.iteye.com/blog/2254154 分为5个部分:    一.周期性出现connect timeout    二.redis bgrewriteaof问 ...

  5. 安装python爬虫scrapy踩过的那些坑和编程外的思考

    这些天应朋友的要求抓取某个论坛帖子的信息,网上搜索了一下开源的爬虫资料,看了许多对于开源爬虫的比较发现开源爬虫scrapy比较好用.但是以前一直用的java和php,对python不熟悉,于是花一天时 ...

  6. ［原创］阿里云RocketMQ踩过的哪些坑

    由于公司的最近开始使用RocketMQ来做支付业务处理, 便开启了学习阿里云RocketMQ的学习与实践之路, 其中踩了不少的坑, 大部份是由于没有仔细查看阿里云的技术文档而踩的坑. 但是有一个非常大 ...

  7. Spring Cloud 升级最新 Finchley 版本，踩了所有的坑！

    Spring Boot 2.x 已经发布了很久,现在 Spring Cloud 也发布了 基于 Spring Boot 2.x 的 Finchley 版本,现在一起为项目做一次整体框架升级. 升级前 ...

  8. Redis上踩过的一些坑

    来自: http://blog.csdn.net//chenleixing/article/details/50530419 上上周和同事(龙哥)参加了360组织的互联网技术训练营第三期,美团网的DB ...

  9. Android Camera开发经验总结以及踩过的那些坑

    写在开头 需求方:上传试卷的时候,用户自己拍的照片有很多问题.如:不清晰.图片歪了.错误图片等.我们要是能够对拍摄照片进行识别处理就好了,能够裁切矫正就更好了,最好可以像二维码扫描一样,直接识别处理- ...

随机推荐

  1. 【DM642学习笔记十】DSP优化记录

    1. 处理的数据先EDMA到片内,具有更高的效率! 以YUV2RGB为例: #pragma DATA_SECTION(onchipBuf0_y,".INTPROCBUFF"); # ...

  2. Java Iterator模式

    Iterator迭代器的定义:迭代器(Iterator)模式,又叫做游标(Cursor)模式.GOF给出的定义为:提供一种方法访问一个容器(container)对象中各个元素,而又不需暴露该对象的内部 ...

  3. Luogu P2764 最小路径覆盖问题(二分图匹配)

    P2764 最小路径覆盖问题 题面 题目描述 «问题描述: 给定有向图 \(G=(V,E)\) .设 \(P\) 是 \(G\) 的一个简单路(顶点不相交)的集合.如果 \(V\) 中每个顶点恰好在 ...

  4. 海量大数据大屏分析展示一步到位：DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践

    1. 概述 数据服务(https://ds-cn-shanghai.data.aliyun.com) 是DataWorks产品家族的一员,提供了快速将数据表生成API的能力,通过可视化的向导,一分钟“ ...

  5. [jnhs]使用netbeans生成的webapp发布到tomcat是需要改名字的,不然就是404Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

    2018-12-21更新 退出tomcat然后删除解压之后的文件夹,然后再启动tomcat也可以解决(安装版tomcat) 2018-12-9更新 有时候这样也可以解决 第一次使用tomcat发布we ...

  6. 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

  7. Chrome谷歌浏览器调试

    Chrome浏览器调试技巧  https://blog.csdn.net/u014727260/article/details/53231298

  8. python实例 字典

    #! /usr/bin/python x={'a':'aaa','b':'bbb','c':12} print (x['a']) print (x['b']) print (x['c']) for k ...

  9. python 线性代数模块linalg

  10. C++中的 istringstream 的用法

    C++引入了ostringstream.istringstream.stringstream这三个类,要使用他们创建对象就必须包含<sstream>这个头文件. istringstream ...