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

Question

我在 centeredSlides 模式下使用滑动器并且循环选项为真。我想当我点击一张幻灯片时，该幻灯片设置为滑动器轮播中的居中幻灯片。 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 然后点击任何一张幻灯片就会切换到这张幻灯片

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

How to change centered slide by clicking on desired slide in swiper.js?

javascript

swiper.js