如何通过单击 swiper.js 中所需的幻灯片来更改居中幻灯片？

Question

我在 centeredSlides 模式下使用 swiper 且循环选项为 true。我想当我单击幻灯片时，将该幻灯片设置为滑动轮播中的居中幻灯片。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