简介

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

用法

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

<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提供的功能是非常丰富的，可选的参数也很多。也可以利用其回调函数做一些更精彩的交互。