Swiper轮播图使用

Swiper轮播图使用

1、网站

https://www.swiper.com.cn/

2、使用

内部需要使用touch事件（触摸）,比如touchstart、touchmove、touchend这些事件，非常底层

3、使用方法

https://www.swiper.com.cn/usage/index.html

4、使用

 1、首先要加载插件
      1）swiper-bundle.min.js
      2）swiper-bundle.min.css
 2、下载地址：
     https://www.swiper.com.cn/download/index.html#file1
 3、下载后解压缩，把两个文件放进文件夹里面
 4、分别引入样式表
 通过link和script标签引入css和js文件

5、一个简单的轮播图的实现

 //1、引入文件
 <link rel="stylesheet" href="./swiper-lib/swiper-bundle.min.css">
  <script src="./swiper-lib/swiper-bundle.min.js"></script>
//2、写样式
.swiper {
          width: 3.75rem;
          height: 300px;
          padding-top: 20px;
          font-size: 20px;
          background-color: #FF5000;
      }
      //3、写html结构
        <div class="swiper">
          <div class="swiper-wrapper">
              <div class="swiper-slide">第一张</div>
              <div class="swiper-slide">第二张</div>
              <div class="swiper-slide">第三张</div>
          </div>

   //4、创建swiper实例
        <script>
      var mySwiper = new Swiper('.swiper', {
          loop: true

      })        
  </script>
      

6、分页器

1、选择swiper的API文档，然后选择分页器
2、通过swiper的演示，首先添加一个分页器的标签
3、在swiper实例中，写分页器的el属性
4、可以通过给分页器添加id，将el属性也修改为id
      这样一个普通的分页器就弄好了
5、修改分页器：bulletClass、bulletActiveClass
6、表示小圆点的类名和被激活的小圆点的类名
7、将这两个属性在script标签的标签去设置
8、添加类写样式
    // 如果需要分页器
            pagination: {
                // 分页器的id
                el: '#fyq',
                // 分页器的小点的类名
                bulletClass: 'dian',
                // 分页器被激活的小点的类名
                bulletActiveClass: 'current',
            },
9、自动轮播：autoplay
    // 自动轮播
            autoplay: {
                // 每隔3秒轮播
                delay: 3000,

               
                // 是否到最后一张图停止
                stopOnLastSlide: false,
                // 当用户触碰自动停止
                disableOnInteraction: true,
            },
            自动切换开启，默认停留三秒
  10、自由模式”FreeMode：
    默认情况下Swiper 每次滑动时只滑动一个Slide，并且会自动贴合Wrapper。开启自由模式后，Swiper 会根据惯性滑动可能不止一格且不会贴合。
         freeMode: true,