Swiper常用于移動端網(wǎng)站的內(nèi)容觸摸滑動
Swiper是純javascript打造的滑動特效插件，面向手機(jī)、平板電腦等移動終端。
Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費(fèi)、穩(wěn)定、使用簡單、功能強(qiáng)大，是架構(gòu)移動終端網(wǎng)站的重要選擇！
1.首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件?？上螺dSwiper文件或使用CDN。
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css" rel="external nofollow" > </head> <body> ... <script src="path/to/swiper.min.js"></script> </body> </html>
2.HTML內(nèi)容。
<div class="swiper-container"> <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> <!-- 如果需要分頁器 --> <div class="swiper-pagination"></div> <!-- 如果需要導(dǎo)航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滾動條 --> <div class="swiper-scrollbar"></div> </div> 導(dǎo)航等組件可以放在container之外
3.你可能想要給Swiper定義一個(gè)大小，當(dāng)然不要也行。
.swiper-container {
width: 600px;
height: 300px;
} 4.初始化Swiper：最好是挨著</body>標(biāo)簽
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滾動條
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>如果不能寫在HTML內(nèi)容的后面，則需要在頁面加載完成后再初始化（不推薦）。
<script type="text/javascript">
window.onload = function() {
...
}
</script>或者這樣（Jquery和Zepto）
<script type="text/javascript">
$(document).ready(function () {
...
})
</script>5.完成。恭喜你，現(xiàn)在你的Swiper應(yīng)該已經(jīng)能正常切換了。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
