1. 在網頁頂部輸入swiper.com.con,進入swiper官網
2. 點擊” API文檔”,獲取輪播圖代碼的地方
3. 點擊左側“swiper初始化“,獲取樣式模板
復制對應代碼,不用打叉部分:(注意,后面那個 < / script> 還是要的,嘿嘿嘿)
4. 點擊 ”獲取swiper” 下的“swiper CDN地址“,意思就是使用網上存在的CDN地址,不用您下載對應的CSS文件
5. 找到對應的導入文件復制放到網頁head部分:
本人不建議使用min版本,唯恐功能不全,不能滿足您的欲望。
Link 和 script
把版本改成4.0.1或者4.0,2,兩者要保持相同
因為使用的是CDN地址,確保在有網絡的情況下執行。
6.調整輪播圖樣式可以在這里復制粘貼,全部都有:
什么花雕樣式都有,怎么翻輪播圖也有,怎么爽就怎么來
這里只是指明了部分小功能,其他可以點進去看展示
但是注意,不是盲目全部粘貼過來,只是粘貼對應的幾行,例如:
選擇輪播圖-無縫輪播,loop(環路),
只需要復制圈出的“loop:true;”代碼到對應位置即可
其中:分頁器里就有輪播圖小按鈕圈圈點擊選擇頁功能。
這樣輪播圖就能實現,如果看不到效果,可以給樣式加背景顏色觀察,另外樣式都可以定義CSS添加。
如有沒有弄明白的“28歲老程序員”們,歡迎評論留言,第一時間反饋給您,讓您少掉兩根頭發。