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
           
        }
      }

 

Logo

一站式 AI 云服务平台

更多推荐