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

Question

I use swiper in centeredSlides mode and loop option is true. I want to when I click on a slide, that slide set as centered slide in swiper carousel. Swiper give me clicked slide index, but how to use it for change the centered slide?

These are my options:

  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

Like this:

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

Just set slideToClickedSlide to true and click on any slide will produce transition to this slide