輪播圖，相信大家都寫過，有的人寫輪播圖的時候經常為某些細節而困惱，所以今天就寫輪播圖聊一聊。
在以前寫輪播圖的時候，自己寫的輪播圖總有一些地方寫的不好，尤其是寫無縫輪播，當然有些寫不好的原因，還是自己的js能力有待加強，但更多的是插件選擇方式不恰當。
在咔拉商城首頁的無縫輪播圖的敲碼中，我選擇使用的是Swiper插件，Swiper這款插件的功能還是很強大的，只需要一些簡單的配置就能完成焦點圖、選項卡、輪播圖等功能，而且不引入JQ庫，就能完成功能。
雖然Swiper在移動端、PC端都能用，但在PC端，它不兼容IE9以下。
那麼如何使用Swiper插件寫輪播？
下載好文件後，在頁面上要引入css js 兩個文件，swiper.min.css，swiper.min.js 這個兩個文件。
在html里寫入：
注意里的class類名不要更改，因為在引入的CSS和JS中已經寫好了。
然後在JS中添加配置。
這樣無縫輪播就可以實現了，箭頭和分頁的圓點，樣式可以自己修改。
Swiper插件還有很多其他功能，自己可以去官網看，熟悉官網所有的配置，這樣才能最完美的實現自己想要的功能。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/233137.html
微信掃一掃 
支付寶掃一掃 