溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了swiper移動端輪播插件，供大家參考，具體內容如下
下面是我遇到的問題，也是用此插件常用的幾個參數，如果你的輪播不需要很復雜，看本文就可以解決。假如你想多了解些， 看官們這里請 swiper 插件的官方地址。
第一步 引入 swiper.min.js
<script src="../style/js/swiper.min.js"></script>
第二步 html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img alt="" src="https://cache.yisu.com/upload/information/20200622/114/55407.jpg">
</div>
<div class="swiper-slide">
<img alt="" src="https://cache.yisu.com/upload/information/20200622/114/55408.jpg">
</div>
<div class="swiper-slide">
<img alt="" src="https://cache.yisu.com/upload/information/20200622/114/55410.jpg">
</div>
</div>
<div class="swiper-pagination"></div> <!--需要輪播序號的時候寫-->
</div>
第三步 調用 ( 重點來了 )
var mySwiper = new Swiper('.swiper-container', {
pagination : '.swiper-pagination',
loop : true,
autoplay : 3000
});
現在這種情況下，圖片可以自動輪播，但是當用手觸碰之后，就會停止輪播，所以要再添加一個參數
var mySwiper = new Swiper('.swiper-container', {
pagination : '.swiper-pagination',
loop : true,
autoplay : 3000,
autoplayDisableOnInteraction : false /* 注意此參數，默認為true */
});
無論怎么滑，輪播事件都會重新觸發。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
