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

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

javascript swiper.js

Solution 1:^[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

Solution 2:^[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Eliezer Berlin
Solution 2	Iman

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]