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

大韋哥 發表於 2020-09-22
CSS

 

1.  在網頁頂部輸入swiper.com.con,進入swiper官網

 

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

 

 

 

2.   點選” API文件”,獲取輪播圖程式碼的地方

 

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

 

 

 

3.   點選左側“swiper初始化“,獲取樣式模板

 

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

 

 

 

複製對應程式碼,不用打叉部分:(注意,後面哪個 < / script> 還是要的,嘿嘿嘿)

 

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

 

 

 

4.   點選 獲取swiper” 下的“swiper CDN地址“,意思就是使用網上存在的CDN地址,不用您下載對應的CSS檔案

 

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

 

 

 

5.   找到對應的匯入檔案複製放到網頁head部分:

  本人不建議使用min版本,唯恐功能不全,不能滿足您的慾望。

 

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

 

 

 

Link script

 

把版本改成4.0.1或者4.0,2,兩者要保持相同

 

因為使用的是CDN地址,確保在有網路的情況下執行。

 

 

 

6.調整輪播圖樣式可以在這裡複製貼上,全部都有:

  什麼花雕樣式都有,怎麼翻輪播圖也有,怎麼爽就怎麼來

  這裡只是指明瞭部分小功能,其他可以點進去看展示

 

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

 

 

  但是注意,不是盲目全部貼上過來,只是貼上對應的幾行,例如:

 選擇輪播圖-無縫輪播,loop(環路),

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

 

 

 只需要複製圈出的“loop:true;”程式碼到對應位置即可

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

 

其中:分頁器裡就有輪播圖小按鈕圈圈點選選擇頁功能。

 

 

 

這樣輪播圖就能實現,如果看不到效果,可以給樣式加背景顏色觀察,另外樣式都可以定義CSS新增。

 

 如有沒有弄明白的“28歲老程式設計師”們,歡迎評論留言,第一時間反饋給您,讓您少掉兩根頭髮。

 

 

 

 

1.   頂部輸入swiper.com.con

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

2.   點選” API文件

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

 

 

 

 

 

 

 

3.   點選左側“swiper初始化“,獲取樣式模板

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

複製對應程式碼,不用打叉部分:

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

4.   點選 獲取swiper” 下的“swiper CDN地址“

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

5.   找到對應的匯入檔案複製放到網頁head部分:

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

Link script

把版本改成4.0.1或者4.0,2,兩者要保持相同

因為使用的是CDN地址,確保在有網路的情況下執行。

 

6.調整輪播圖樣式可以在這裡複製貼上,全部都有:

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

其中:分頁器裡就有輪播圖小按鈕圈圈點選選擇頁功能。

 

輪播圖就能實現,如果看不到,可以給樣式加背景顏色觀察。