Swiper 4.x 使用方法(移動端網(wǎng)站的內(nèi)容觸摸滑動)
更新時間：2018年05月17日 22:05:07 投稿：mdxy-dxy
Swiper是純javascript打造的滑動特效插件，面向手機(jī)、平板電腦等移動終端，這里為大家簡單介紹一下Swiper4的用法,需要的朋友可以參考下
Swiper常用于移動端網(wǎng)站的內(nèi)容觸摸滑動
Swiper是純javascript打造的滑動特效插件，面向手機(jī)、平板電腦等移動終端。
Swiper能實現(xiàn)觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費、穩(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定義一個大小，當(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)能正常切換了。
相關(guān)文章
這篇文章主要介紹了簡單使用webpack打包文件的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
javascript 程序庫的比較（一）之DOM功能2010-04-04
用javascript getComputedStyle獲取和設(shè)置style的原理
這兩天用了baidu 百度空間中的彈出窗口js，感覺不錯，很強(qiáng)大，很好很簡單的解決了好幾個問題，界面友好度以及美化也好多了，以前都是硬邦邦window.open();2008-10-10
javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁的高度、寬度等
這篇文章主要介紹了javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁的高度、寬度等,需要的朋友可以參考下2014-05-05
下面小編就為大家?guī)硪黄猨s數(shù)字計算 誤差問題的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
viewer.js一個強(qiáng)大的基于jQuery的圖像查看插件(支持旋轉(zhuǎn)、縮放)
這篇文章主要介紹了Viewer這一款強(qiáng)大的 jQuery 圖像瀏覽插件,在信息詳情頁面實現(xiàn)點擊圖片可以預(yù)覽,腳本之家也是用的這個js，這里為分享一下使用方法，需要的朋友可以參考下2020-04-04
javascript如何判斷數(shù)組內(nèi)元素是否重復(fù)的方法集錦
javascript如何判斷數(shù)組內(nèi)元素是否重復(fù)的方法集錦...2007-02-02
JS分割字符串并放入數(shù)組的函數(shù)，需要的朋友可以參考下。2011-07-07
適用于Asp。 在主域名設(shè)置的Cookie，在各子域名共用；適用于博客等提供二級域名。這個問題，以網(wǎng)上有眾多帖子，可惜都沒有完整解決。2008-08-08
判斷javascript的數(shù)據(jù)類型(示例代碼)
這篇文章主要是對判斷javascript的數(shù)據(jù)類型(示例代碼)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12