HTML+CSS使用swiper快速生成最簡單、最快捷、最易看懂的輪播圖


 

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歲老程序員”們,歡迎評論留言,第一時間反饋給您,讓您少掉兩根頭發。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM