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

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

1.基本結構:

swiper

代碼

Swiper:整個滑動對象,有時特指滑塊釋放后仍然正向移動直到貼合邊緣的過程(過渡);
Container:Swiper的容器,里面包括滑動塊(slides)的封套(wrapper)、分頁器(pagination)、前進按鈕等;
Wrapper:觸控的對象,可觸摸區(qū)域,移動的塊的集合,過渡時會隨slide切換產生位移;
Slider:切換的滑塊,可以包含文字、圖片、html元素或另外一個Swiper;
Pagination:分頁器,指示slide的數量和當前活動的slide;
active slide:活動滑塊,即當前看到的(visible)slide,當可視slide不止一個時,默認最左邊那個是活動滑塊;
Callback:回調函數,在某些情況下觸發(fā)。
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等。

名稱欄目:網站前端開發(fā)之Swiper3輪播的使用
本文網址:http://muchs.cn/news/244872.html

成都網站建設公司_創(chuàng)新互聯,為您提供Google、標簽優(yōu)化網頁設計公司、ChatGPT、網站內鏈、小程序開發(fā)

廣告

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

外貿網站建設