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歲老程式設計師”們,歡迎評論留言,第一時間反饋給您,讓您少掉兩根頭髮。
1. 頂部輸入swiper.com.con
2. 點選” API文件”
3. 點選左側“swiper初始化“,獲取樣式模板
複製對應程式碼,不用打叉部分:
4. 點選 ”獲取swiper” 下的“swiper CDN地址“
5. 找到對應的匯入檔案複製放到網頁head部分:
Link 和 script
把版本改成4.0.1或者4.0,2,兩者要保持相同
因為使用的是CDN地址,確保在有網路的情況下執行。
6.調整輪播圖樣式可以在這裡複製貼上,全部都有:
其中:分頁器裡就有輪播圖小按鈕圈圈點選選擇頁功能。
輪播圖就能實現,如果看不到,可以給樣式加背景顏色觀察。