網站前端開發(fā)Swiper3輪播插件的使用

2023-03-20 分類：網站建設

HTML代碼

輪播圖在網站中使用的比例非常之高，自己手寫一個輪播比較費時間，而使用swiper（swiper3）輪播插件能很方便做出圖片輪播效果，兼容性好，而且還支持響應式輪播。在項目引入swiper.jquery.min.js和swiper.jquery.min.css文件，html如圖：
JS代碼

js如圖：
如此一個簡單的輪播圖就制作完成了，當然一般網站的輪播圖不會如此簡單，這里就需用到swiper的api了，js如圖：

JS代碼

這里面包含的自動、循環(huán)、響應式、控制按鈕、顯示個數等功能的輪播，當然swiper的功能不止這些，還有很多的api實現的功能。
更多功能Api：
onSlideChangeEnd(swiper)：回調函數，swiper從一個slide過渡到另一個slide結束時執(zhí)行。可接受swiper實例作為參數。
Effect：slide的切換效果，默認為"slide"（位移切換），可設置為"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉）。
paginationType：分頁器樣式類型，可選：‘bullets’ 圓點（默認）、‘fraction’ 分式、‘progress’ 進度條、‘custom’ 自定義。
lazyLoading：設為true開啟圖片延遲加載，使preloadImages無效。
需要將圖片img標簽的src改寫成data-src，并且增加類名swiper-lazy。
背景圖的延遲加載則增加屬性data-background。當設置了slidesPerView:'auto' 或者 slidesPerView > 1，還需要開啟watchSlidesVisibility。
controlBy：設定Swiper相互控制時的控制方式。當兩個swiper的slide數量不一致時可用。默認為'slide'，自身切換一個slide時，被控制方也切換一個slide。
可選：'container'，按自身slide在container中的位置比例進行控制。
Observer：啟動動態(tài)檢查器(OB/觀眾/觀看者)，當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper。默認false，不開啟，可以使用update()方法更新。
onTransitionEnd(swiper):回調函數，過渡結束時觸發(fā)，接收Swiper實例作為參數。

如果你使用setWrapperTranslate和setWrapperTransition來設定wrapper移動，這個函數不會觸發(fā)，你可以使用原生transitionEnd事件。

分享標題：網站前端開發(fā)Swiper3輪播插件的使用
本文來源：http://m.kartarina.com/news/245914.html

成都網站建設公司_創(chuàng)新互聯，為您提供商城網站、營銷型網站建設、關鍵詞優(yōu)化、App開發(fā)、網站營銷、ChatGPT

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容

成都網頁設計提供更加優(yōu)秀的設計讓企業(yè)網站更加專業(yè) 2023-03-20
密云網站優(yōu)化鮮為人知的重要因子 2023-03-20
小程序開發(fā)重磅功能更新-可鏈接公眾號文章等 2023-03-20
成都網站設計及系統(tǒng)開發(fā)制作流程 2023-03-20
全網營銷的優(yōu)勢在哪里？看成都創(chuàng)新互聯怎么說！ 2023-03-20
為什么要進行網站推廣？ 2023-03-20
上海高端網站設計如何快速吸引用戶眼球 2023-03-20