swiper学习笔记

简介

swiper相对于unslider来说，效果更多，同时，可控的参数也更多，体现出来便是在交互性上有了更多的选择。

用法

• 首先，当然要有文件，或者是CSDN的链接。看情况了。

  <link rel="stylesheet" href="../lib/Swiper-3.4.1/dist/css/swiper.min.css">
  <script src="../lib/Swiper-3.4.1/dist/js/swiper.min.js"></script>
  //我用的是本地文件

• html结构

  <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide">something_1</div>
          <div class="swiper-slide">something_2</div>
          <div class="swiper-slide">something_3</div>
          <div class="swiper-slide">something_4</div>
      </div>
  </div>

  swiper-container是swiper的容器；
  swiper-wrapper是需要轮播的位置。

• 控制Swiper函数，设置参数。

  <script>
  var myswiper=new Swiper(".swiper-container",{
      grabCursor:true，
      autoplay:1400,
      speed:1000,
      direction:"horizontal"
  });
  </script>

  参数都是选填的。

---

至此，一个最基础的swiper轮播图（幻灯片）就做好了。

---

总结

swiper提供的功能是非常丰富的，可选的参数也很多。也可以利用其回调函数做一些更精彩的交互。