web前端开发小插件之swiper轮播图

前端开发是现在比较火的一个职业，当然前端工程师的水平也是参差不齐，小编也是其中一员，技术还在努力提高中。在前端开发中经常会遇到要做轮播图的时候，一般在网站首页。网上有很多的轮播图插件，小编要介绍的就是一款跨PC跟移动平台的轮播图插件——swiper。

swiper的用户很多，因为它确实太好用了，因为它同时支持移动和pc端，版本3及以上是不支持IE8的，需要兼容IE8的小伙伴需要使用版本2。

从官网找到下载链接，直接下载swiper相关js跟css，小编这里就不贴链接了，可以按需下载，有jquery版跟zepto版等。

swiper的html有固定的结构，首先要引入相关css样式及js，当然css是可以自定义的。html结构不能变，最简单的例子如下图：

如果光有个自动轮播功能那也就不稀奇了，swiper可以有很多配置选项的，所以受到了广大用户的青睐，比如自定义滚动时间、方向、动画切换效果等等，还有许多事件就不一一列举了，需要的小伙伴可以去官网看哦！

轮播图，相信大家都写过，有的人写轮播图的时候经常为某些细节而困恼，所以今天就写轮播图聊一聊。
在以前写轮播图的时候，自己写的轮播图总有一些地方写的不好，尤其是写无缝轮播，当然有些写不好的原因，还是自己的js能力有待加强，但更多的是插件选择方式不恰当。
在咔拉商城首页的无缝轮播图的敲码中，我选择使用的是Swiper插件，Swiper这款插件的功能还是很强大的，只需要一些简单的配置就能完成焦点图、选项卡、轮播图等功能，而且不引入JQ库，就能完成功能。
虽然Swiper在移动端、PC端都能用，但在PC端，它不兼容IE9以下。
那么如何使用Swiper插件写轮播？
下载好文件后，在页面上要引入css js 两个文件，swipermincss，swiperminjs 这个两个文件。
在html里写入：
注意里的class类名不要更改，因为在引入的CSS和JS中已经写好了。
然后在JS中添加配置。
这样无缝轮播就可以实现了，箭头和分页的圆点，样式可以自己修改。
Swiper插件还有很多其他功能，自己可以去官网看，熟悉官网所有的配置，这样才能最完美的实现自己想要的功能。

可以。自己改要懂得js、html，如果焦点图后台可以设置，那你还需要懂的网站所使用的开发语言，比如PHP。你也可以网上搜一下，看是否有人放了教程，这样更快捷。

---