swiper 切换到指定slide
1、 如果是指定初始位置,用initialSlidethis.swiper = new Swiper(".swiper-container", {initialSlide: this.curr_index,loop: true,slidesPerView: 1.1,spaceBetween: 2,// pagination: {//el: '.swiper-pagination',//..
·
1、 如果是指定初始位置,用 initialSlide
this.swiper = new Swiper(".swiper-container", {
initialSlide: this.curr_index,
loop: true,
slidesPerView: 1.1,
spaceBetween: 2,
// pagination: {
// el: '.swiper-pagination',
// clickable: true,
// },
grabCursor: true,
autoplayDisableOnInteraction: false,
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
onClick: () => {
console.log("swiper onClick");
},
onSlideChangeStart: swiper => {
console.log("swiper", swiper);
}
});
2、如果运行中指定
因为 loop:true ,所以用slideToLoop (https://www.swiper.com.cn/api/methods/417.html)
//swiper.slideTo(this.curr_index, 100, false);//切换到slide
this.swiper.slideToLoop(this.curr_index, 100, false);
--------
3、切换后触发的事件 (loop: true时, 获得的this.activeIndex有问题)
new Swiper(".swiper-container", {
pagination: {
el: ".swiper-pagination"
},
on: {
slideChangeTransitionEnd: function() {
console.log("swiper1 activeIndex=" + this.activeIndex); //切换结束时,告诉我现在是第几个slide
}
},
observer:true,//修改swiper自己或子元素时,自动初始化swiper 解决vue下划不动的问题
observeParents:true,//修改swiper的父元素时,自动初始化swiper
});
loop:true 时用 realIndex
on: {
slideChange: function() {
console.log("swiper realIndex=" + this.realIndex); //切换结束时,告诉我现在是第几个slide
}
}
更多推荐



所有评论(0)