Swiper的使用

文档：https://www.swiper.com.cn/api/index.html

参考博客：https://www.cnblogs.com/hellman/p/6051508.html

初始化：

//html 
1.这里最外层的 swiper-container class是用来初始化的时候对应的js里面的class；
2.初始化的里层的元素，必须含有 swiper-wrapper的class，然后这个元素里层的元素就是轮播的数据
3.里层的轮播的元素，必须要加swiper-slide的class，否则不生效

 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">slider1</div>
            <div class="swiper-slide">slider2</div>
            <div class="swiper-slide">slider3</div>
        </div>
 </div>




//js

<script>
var mySwiper = new Swiper('.swiper-container', {
	//autoplay: true,//可选选项，自动滑动
    initialSlide：1,//设定初始化时slide的索引(例如这里1，默认展示的是第二张)
    direction："vertical",//Slides的滑动方向，可设置水平 默认(horizontal)  或垂直(vertical)
    speed:300,//切换速度，即slider自动滑动开始到结束的时间（单位ms）
    autoplay : {
     delay:3000
    },
    grabCursor:true,//为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
    parallax：true,//设置为true开启视差效果
})
</script>

场景一：

不需要无缝轮播，只需要滑动的时候左右切换张数

html：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
    </div>
</div>

js：
 var swiper = new Swiper('.swiper-container');

场景二：

滑动的时候左右切换张数，同时点击左右箭头也可以切换

html：
   <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
    </div>
      <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>


js：
   var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

场景三：

滑动的时候左右切换张数，同时下面有对应张数的点点，滑动的时候，对应的点点高亮

html:

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

js:

var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
});

如果想要当前滑动到的点点大，其他点点小的效果，则只需要改动下js的配置

 var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
    });

场景四：

左右滑动/箭头切换的时候，有进度条显示进度

html：

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

js：
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

场景五：

左右滑动/箭头切换的时候，有分页，显示页数

html：

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

js：
  var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

场景六：

上下滑动，有点点

html：
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

js：
  var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });