Как изменить центрированный слайд, щелкнув нужный слайд в swiper.js?

Question

Я использую свайпер в режиме centerSlides, и параметр цикла верен. Я хочу, чтобы, когда я нажимаю на слайд, этот слайд устанавливается как центральный слайд в карусели 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);
    },
  },

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

Codepen: https://codepen.io/Terrafire123/pen/gOwbjMy

Answer 2

Просто установите slideToClickedSlideк trueи щелчок по любому слайду произведет переход на этот слайд