今天在寫一個(gè)移動(dòng)端的頁面，使用 swiper 輪播插件寫了一個(gè) banner 輪播，并設(shè)置了自動(dòng)滑動(dòng)。
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true, // 循環(huán)模式選項(xiàng)
autoplay: true, // 自動(dòng)切換
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
})經(jīng)過測(cè)試發(fā)現(xiàn)，手動(dòng)滑動(dòng)切換之后，自動(dòng)播放不在起效，就無法自動(dòng)切換了。
查詢相關(guān)資料發(fā)現(xiàn)，swiper 有一個(gè) disableOnInteraction 屬性：
disableOnInteraction
用戶操作 swiper 之后 ，是否禁止 autoplay 。默認(rèn)為true：停止。 如果設(shè)置為 false ，用戶操作 swiper 之后自動(dòng)切換不會(huì)停止，每次都會(huì)重新啟動(dòng) autoplay。 操作包括觸碰，拖動(dòng)，點(diǎn)擊 pagination 等。
根據(jù)官方實(shí)例，作出修改如下：
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true, // 循環(huán)模式選項(xiàng)
autoplay: {
disableOnInteraction: false,
delay: 3000,
},
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
})我是有底線的
掃描二維碼手機(jī)查看該文章
文章引用：http://www.qingbaosc.com/news/webzhishi/1359.html
在線咨詢
電話咨詢
