swiper轮播图插件的使用步骤
生活随笔
收集整理的這篇文章主要介紹了
swiper轮播图插件的使用步骤
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、參考文檔
1.官網：https://swiper.com.cn/
2.案例展示：https://swiper.com.cn/demo/index.html
3.獲取swiper文件：https://swiper.com.cn/download/index.html
4.API文檔：https://swiper.com.cn/api/index.html
二、使用步驟
（一）簡易案例步驟
1.進入官網，先將swiper下載下來。
獲取里面的兩個文件：
一個css文件、一個js文件。稍后需要使用。
2.操作步驟
（1）在案例里面找到自己喜歡的樣式。點擊它右上角的“在新窗口打開”
（2）得到該案例的全屏展示效果，右鍵——查看頁面源代碼
（3）展開之后看到源代碼，直接全部復制，并粘貼到自己的html文件里面。把標紅地方的路徑地址改為自己本地的路徑。（上面已經讓你下載過了）
（4）目錄結構。
（5）整體結構與使用
效果展示：
（6）簡易案例的全部代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" /><title>輪播圖</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /><!-- Link Swiper's CSS --><link rel="stylesheet" href="./css/swiper-bundle.min.css"><!-- Swiper JS --><script src="./js/swiper-bundle.min.js"></script><!-- Demo styles --><style>.swiperBox{width: 400px;height: 300px;border: 1px solid red;}.swiper {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style></head><body><div class="swiperBox"><!-- Swiper --><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div></div><!-- 前進后退按鈕 --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></div><!-- Initialize Swiper --><script>var swiper = new Swiper(".mySwiper", {navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});</script></body> </html>（二）如果想實現其他功能，需要查看API文檔
比如：
我想實現自動輪播，找到有關的API點進去看看。
也就是說寫上autoplay:true就可以實現自動輪播，如果我想調整時間呢，一秒鐘切換一次。delay屬性控制時間。
如果想出現分頁器：https://swiper.com.cn/api/pagination/362.html
如果想循環則使用：https://swiper.com.cn/api/loop/22.html
如果想復制文字：https://www.swiper.com.cn/api/swiping/39.html
以上都加上之后的效果是：
代碼：
三、總結
1.進入官網，找到喜歡的樣式，復制源代碼，然后該js和css文件路徑。
2.根據API文檔找到自己想要的功能。
總結
以上是生活随笔為你收集整理的swiper轮播图插件的使用步骤的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： kind kubernetes 集群内
- 下一篇： Photoshop制作木质音乐播放器主题