網站前端開發之Swiper3輪播的使用

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

1.基本結構：

swiper

Swiper：整個滑動對象，有時特指滑塊釋放后仍然正向移動直到貼合邊緣的過程(過渡)；
Container：Swiper的容器，里面包括滑動塊（slides）的封套（wrapper)、分頁器(pagination)、前進按鈕等；
Wrapper：觸控的對象，可觸摸區域，移動的塊的集合，過渡時會隨slide切換產生位移；
Slider：切換的滑塊，可以包含文字、圖片、html元素或另外一個Swiper；
Pagination：分頁器，指示slide的數量和當前活動的slide；
active slide：活動滑塊，即當前看到的(visible)slide，當可視slide不止一個時，默認最左邊那個是活動滑塊；
Callback：回調函數，在某些情況下觸發。
2.API：
1.new Swiper(swiperContainer, parameters):用于初始化一個Swiper，返回初始化后的Swiper實例。swiperContainer : 必選，HTML元素或者string類型，Swiper容器的css選擇器，例如“.swiper-container”。parameters : 可選，參見配置選項。

2.Autoplay:自動切換的時間間隔（單位ms），不設定該參數slide不會自動切換。用戶操作后autoplay停止，參考基本選項autoplayDisableOnInteraction。你還可以在某個slide上設置單獨的停留時間，例
。
3.autoplayDisableOnInteraction：用戶操作swiper之后，是否禁止autoplay。默認為true：停止。如果設置為false，用戶操作swiper之后自動切換不會停止，每次都會重新啟動autoplay。
操作包括觸碰，拖動，點擊pagination等。

網站標題：網站前端開發之Swiper3輪播的使用
網頁URL：http://m.kartarina.com/news22/244872.html

成都網站建設公司_創新互聯，為您提供小程序開發、電子商務、自適應網站、營銷型網站建設、標簽優化、網站排名

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

猜你還喜歡下面的內容