Swiper 滑动切换图片（可用于PC端，移动端）

作为一名后端的普通程序猿， 你让我搞这种前端不是跟我玩命吗，所以用插件来搞，省事又简单，而且Swiper使用又简单是吧；

头皮发麻，不喜欢说废话，我更喜欢直接看到效果；

 

按Swiper官方文档来说， 它需要配合JQuery来使用，所以也需要引入JQ；

1， 先去官网下载一波它的 CSS, JS 文件先，https://2.swiper.com.cn/download/index.html#file1

　  下载完直接引入即可上手用了， 路径自己改。

<link rel="stylesheet" href="css/swiper.min.css">

<script src="js/swiper.min.js"></script>

 

2， 废话不多说， 直接上测试例子；

　　HTML（swiper的写法）：

　　container： 装所有滑动slide的容器

  <!-- Swiper -->
  <div class="swiper-container"> 
    <div class="swiper-wrapper">
    <div class="swiper-slide blue-slide">内容1</div>
    <div class="swiper-slide red-slide">内容2</div>
    <div class="swiper-slide orange-slide">内容3</div>
    <div class="swiper-slide blue-slide">内容4</div>
    <div class="swiper-slide orange-slide">内容5</div>
  </div>

     

　　CSS（这个按自己喜欢来调， 例子当然是越简单越好）:

  <!-- Demo styles -->
  <style>
    * {
      margin: 0;
      padding: 0;
      }
      .blue-slide {
          background: #4390EE;
      }
      .red-slide {
          background: #CA4040;
      }
      .orange-slide {
          background: #FF8604;
      }
      .swiper-slide {
          line-height: 300px;
          color: #fff;
          font-size: 36px;
          text-align: center;
      }
  </style>

　　

　　JS：

　　如果只是简单做轮播图，autoplay 和 loop 这两个参数即可；

　　里面的注释我已经写好了， 更多的参数或者功能可以去官网找下即可；

  <!-- Initialize Swiper -->
  <script>
  var mySwiper = new Swiper('.swiper-container',{
    loop : true, // 形成环路，不断循环， 跟autoplay可组成轮播图
    autoplay: {
          delay: 1000,//1秒切换一次
    },
    initialSlide: 2, // 一开始就放到所有中间的位置
    slidesPerView: 3, // slider容器能够同时显示的slides数量
    centeredSlides: true, // 默认状态下slide居左，但是居左有问题，取到的slide下标有误，一般设为true:居中
    slideToClickedSlide: true, // 点击slide会过渡到这个slide
    effect : 'coverflow', // 切换效果, coverflow:3D流 (可选)
    coverflowEffect: { // 切换效果的参数
      rotate: 0,
      stretch: 5,
      depth: 60,
      modifier: 2,
      slideShadows : true
    },
    on:{
      click:function(){ 
        alert(this.clickedIndex); //当前点击的是第几张
      },
      transitionEnd: function(event){
        img_index = this.activeIndex; //滑动到第几张
      },
    }
  });
  </script>

 

　效果如下：