如何使用插件 Swiper

最新推荐文章于 2022-11-17 16:45:53 发布

mkmin

最新推荐文章于 2022-11-17 16:45:53 发布

阅读量1.1k

点赞数

分类专栏：插件文章标签：插件

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/72811954

版权

插件专栏收录该内容

13 篇文章 1 订阅

订阅专栏

swiper。是一款用于滑动的插件，兼容性很是不错

首先，我们在swiper的中文网可以看到很详细的解释和代码，但是里面部分内容太麻烦了，所以我们很需要自己整理整理，看看哪部分时我们需要的

我就整理了一些自己觉得自己需要的

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <link rel="stylesheet" href="lib/swiper-3.4.2.min.css" />
   </head>

   <body>
       <div class="swiper-container">
           <div class="swiper-wrapper">
               <div class="swiper-slide" style="background: red;height: 500px;">swiper-slider1</div>
               <div class="swiper-slide" style="background: green;height: 500px;">swiper-slider2</div>
               <div class="swiper-slide" style="background: blue;height: 500px;">swiper-slider3</div>
           </div>
           <div class="swiper-pagination swiper-pagination-bullets">
               <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
               <span class="swiper-pagination-bullet"></span>
               <span class="swiper-pagination-bullet"></span>
           </div>
       </div>
       <script type="text/javascript" src="lib/jquery-2.1.1.min.js"></script>
       <script type="text/javascript" src="lib/swiper-3.4.2.jquery.min.js"></script>
       <script>
           var myswiper = new Swiper('.swiper-container', {
               //设置轮播时间
               autoplay: 500,
               //设置初始化第几个
               //滑动方向
               //               direction: 'vertical',
               //滑动速度
               //               speed: 3000,
               //用户拖动后会不会停止轮播
               //               autoplayDisableOnInteraction: false,
               //一次结束后怎么是不是会继续轮播
               //                               autoplayStopOnLast: true,
               //               watchSlidesProgress: true,
               //               watchSlidesVisibility: true,
               //监听事件，当改变的时候
               onSlideChangeEnd: function(swiper) {
                   console.log(swiper.activeIndex);
                   $(".swiper-pagination-bullet").each(function() {
                       $(this).removeClass("swiper-pagination-bullet-active");
                   });

                   $(".swiper-pagination-bullet").eq(swiper.activeIndex).addClass('swiper-pagination-bullet-active');
               }
           });
       </script>
   </body>

</html>

代码大体跟官网差不多，不过在“小圆点”那儿，我做了自己的处理，因为在最外层的div封装了position属性，我就不自己去写css，二是设置了onslidechange事件，当改变的时候，清除所有小圆点的“选中状态”，给当前小圆点添加，好了。就这样，慢慢改成自己需要的，比如当改变的时候，添加一些新属性