在调试swiper的过程中也是遇到了不少坑,比如:
1- loop不生效
2- 手动轮播后,自动轮播失效
3- 点击对应的slide,获取不到对应的index
4- 动态数据绑定,导致点击事件消失
5- 点击失效
等等......一系列的问题!
也是脑壳疼!!!!!
接下来提供一个比较全的解决方案:
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 = 数据数组的长度;
var reallIndex = (swiper.activeIndex - 1 + i) % (i);
console.log(reallIndex); }
})
console.log(swipersInit)
}, 100)
一些配置项,官网上都有介绍!
这里提示一个注意点, 当使用swiper3.x版本的,有的版本是没有
reallIndex
这个字段的,这里需要转换一下,看以上代码!
转换的目的,就是获取slide真实的index!
点击失效的问题,是插件的问题,升级到3.4.2 swiper
具体还得多看看github!
还有一点比较重要的是,实例销毁时,传递的布尔值,要根据文档的提示进行操作!
比较新的版本应该是不存在此问题的!
网友评论