在以前写轮播图的时候，自己写的轮播图总有一些地方写的不好，尤其是写无缝轮播，当然有些写不好的原因，还是自己的js能力有待加强，但更多的是插件选择方式不恰当。
在咔拉商城首页的无缝轮播图的敲码中，我选择使用的是Swiper插件，Swiper这款插件的功能还是很强大的，只需要一些简单的配置就能完成焦点图、选项卡、轮播图等功能，而且不引入JQ库，就能完成功能。
虽然Swiper在移动端、PC端都能用，但在PC端，它不兼容IE9以下。
那么如何使用Swiper插件写轮播？
下载好文件后，在页面上要引入css js 两个文件，swiper.min.css，swiper.min.js 这个两个文件。
在html里写入：
注意里的class类名不要更改，因为在引入的CSS和JS中已经写好了。
然后在JS中添加配置。
这样无缝轮播就可以实现了，箭头和分页的圆点，样式可以自己修改。
Swiper插件还有很多其他功能，自己可以去官网看，熟悉官网所有的配置，这样才能最完美的实现自己想要的功能。
1、如果是在pc端，想切换到第三页，可以直接点击底部的第三个小圆圈，想点击按钮跳到“第三页”，直接模拟点击第三个小圆圈就可以，可以写：$('.swiperpaginationspan').eq(2).trigger('click')
2、也可以写：swiper.slideTo(3, 1000, false)，即可。
slideTo方法有三个参数：第一个参数是指定切换到某一页的索引；第二个参数是切换速度；第三个参数是布尔值，表示是否要触发onSlideChange回调函数。
扩展资料：
Swiper插件有可供选择的动画效果插件Swiper Animate，在这个插件里面有很多可供选择的动画比如缩放、旋转、摇晃等各种动画效果。
1、在使用Swiper Animate之前，必须要保证已经加载swiper.animate.min.js和animate.min.css。
2、在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
参考资料来源：Swiper中文网
