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

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

• 1 Are you able to create a fiddle or working example of this, with the HTML and CSS? Otherwise any solution may not look like what you're seeing. – sbgib Commented Nov 28, 2020 at 10:48

2 Answers 2

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

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