如何通過單擊 swiper.js 中的所需幻燈片來更改居中幻燈片？

Question

我在 centeredSlides 模式下使用 swiper 並且 loop 選項為真。 我想當我點擊一張幻燈片時，將該幻燈片設置為滑動器輪播中的居中幻燈片。 Swiper 給我點擊的幻燈片索引，但如何使用它來更改居中的幻燈片？

這些是我的選擇：

  slidesPerView: 4.5,
  spaceBetween: 20,
  updateOnWindowResize: true,
  loop: true,
  grabCursor: true,
  centeredSlides: true,
  centeredSlidesBounds: true,
  initialSlide: 0,
  on: {
    click() {
      console.log(this.clickedIndex);
    },
  },

Answer 1

像這樣：

var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 4.5,
  spaceBetween: 20,
  updateOnWindowResize: true,
  loop: true,
  grabCursor: true,
  centeredSlides: true,
  centeredSlidesBounds: true,
  initialSlide: 0,
  on: {
    click() {
        console.log('index', this.clickedIndex);
        mySwiper.slideTo(this.clickedIndex);    
    },
  },
});

代碼筆： https ://codepen.io/Terrafire123/pen/gOwbjMy

Answer 2

只需將slideToClickedSlide設置為true並單擊任何幻燈片將產生到該幻燈片的過渡