swiper 切换到指定slide


1、 如果是指定初始位置，用 initialSlide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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）

1
2
3
4
//swiper.slideTo(this.curr_index, 100, false);//切换到slide


this.swiper.slideToLoop(this.curr_index, 100, false);

--------

3、切换后触发的事件 (loop: true时， 获得的this.activeIndex有问题)

1
2
3
4
5
6
7
8
9
10
11
12
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

1
2
3
4
5
6
on: {
        slideChange: function() {
          console.log("swiper realIndex=" + this.realIndex); //切换结束时，告诉我现在是第几个slide
           
        }
      }