在調(diào)試swiper的過程中也是遇到了不少坑怔锌,比如:
1- loop不生效
2- 手動(dòng)輪播后,自動(dòng)輪播失效
3- 點(diǎn)擊對(duì)應(yīng)的slide变过,獲取不到對(duì)應(yīng)的index
4- 動(dòng)態(tài)數(shù)據(jù)綁定埃元,導(dǎo)致點(diǎn)擊事件消失
5- 點(diǎn)擊失效
等等......一系列的問題!
也是腦殼疼C恼5荷薄!U腹隆类嗤!
接下來提供一個(gè)比較全的解決方案:
function initSwiper() {
$timeout(function () {
swipersInit = new window.Swiper('.swiper-container', {
pagination: '.pagination',
paginationClickable: true,
initialSlide: 0,
autoplay: 3000,
loop: true,
observer: true,
observeParents: false,
autoplayDisableOnInteraction: false,
onSlideChangeEnd: function (swiper) {
$timeout(function () {
swiper.update();
swipersInit.startAutoplay();
}, 100)
},
onClick: function (swiper) {
var i = 數(shù)據(jù)數(shù)組的長(zhǎng)度;
var reallIndex = (swiper.activeIndex - 1 + i) % (i);
console.log(reallIndex); }
})
console.log(swipersInit)
}, 100)
一些配置項(xiàng)辨宠,官網(wǎng)上都有介紹遗锣!
這里提示一個(gè)注意點(diǎn), 當(dāng)使用swiper3.x版本的嗤形,有的版本是沒有
reallIndex
這個(gè)字段的精偿,這里需要轉(zhuǎn)換一下,看以上代碼!
轉(zhuǎn)換的目的,就是獲取slide真實(shí)的index笔咽!
點(diǎn)擊失效的問題搔预,是插件的問題,升級(jí)到3.4.2 swiper
具體還得多看看github叶组!
還有一點(diǎn)比較重要的是拯田,實(shí)例銷毀時(shí),傳遞的布爾值扶叉,要根據(jù)文檔的提示進(jìn)行操作勿锅!
比較新的版本應(yīng)該是不存在此問題的帕膜!