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

我在centeredSlides模式下使用swiper，循环选项为true。我想在我点击幻灯片时，将该幻灯片设置为swiper转盘中的居中幻灯片。Swiper给我点击的幻灯片索引，但如何使用它来更改居中的幻灯片

以下是我的选择：

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

像这样：

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);    
    },
  },
});

代码笔：

像这样：

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);    
    },
  },
});

---

Codepen:

您是否能够使用HTML和CSS创建一个小提琴或工作示例？否则，任何解决方案都可能和您看到的不一样。您能用HTML和CSS创建一个小提琴或工作示例吗？否则，任何解决方案都可能与您看到的不一样。