網站前端制作之swiper拖拽左右滑動按鈕(前端制作個人網站)

2024-01-08 分類：網站建設

在一些前端項目中需要做滑動按鈕，比如滑動切換模式之類的，如圖：

在PC端上，鼠標拖動滑塊一次切換不同的模式，用js自己寫比較麻煩，我想到了一個簡單有效的辦法，用swiper輪播插件來寫簡單快速。Swiper輪播插件是非常強大的，前端工作人員一定不陌生，如果你不了解可以去官網看看API，你會發現它不僅僅只局限于表面的輪播功能。
首先在頁面引入jquery和swiper插件，然后是編寫html代碼如圖：

在這里有3種不同的模式要切換，就要用到5個swiper-slide，如圖所示在第1個swiper-lisde中設置標簽屬性data-index="2"，第2個swiper-lisde中設置標簽屬性data-index="1"，第3個swiper-lisde中設置標簽屬性data-index="0"，同時第三個swiper-slide設置滑塊背景圖片，其余的空白。Css在這里就不多說了。
Siwpe輪播插件有自帶的API，如圖：

如圖所示，“slidesPerView: 3,”:設置slider容器能夠同時顯示的slides數量，在這里設置為3，”initialSlide: 2,”:設置為2后，Swiper初始化時activeSlide成了第三個。因為要滑動后對應上的不同模式，就需要用到swiper的回調函數”onSlideChangeEnd”,這時就要用到標簽屬性值了（data-index），滑塊成功滑動一次”swiper-slide-active”的位置會發生改變，獲取的標簽屬性值也會不同。根據獲取的值的不同分別添加和刪除選中狀態的類名（“on”）,這樣一個滑動按鈕初步就成了。但在實際測試過程中，會出現回調函數不成功的情況，經過多次測試和研究需要用到” crossFade: true（過度效果結束觸發）”,這樣滑動按鈕就完成了。
創新互聯專注于高端網站建設，為上市公司、中大型企業集團提供網站定制、小程序定制服務，歡迎客戶咨詢我們的建站熱線400-800-9385

以上就是關于網站前端制作之swiper拖拽左右滑動按鈕(前端制作個人網站)，希望對你有幫助，更多內容關注創新互聯。

網站標題：網站前端制作之swiper拖拽左右滑動按鈕(前端制作個人網站)
當前網址：http://m.kartarina.com/news3/312553.html

成都網站建設公司_創新互聯，為您提供網站維護、外貿建站、品牌網站建設、做網站、靜態網站、手機網站建設

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

猜你還喜歡下面的內容