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

【问题标题】：How to change centered slide by clicking on desired slide in swiper.js?如何通过单击 swiper.js 中所需的幻灯片来更改居中幻灯片？
【发布时间】：2020-11-17 07:25:48
【问题描述】：

我在 centeredSlides 模式下使用 swiper，并且循环选项为 true。我想当我单击一张幻灯片时，该幻灯片设置为滑动轮播中的居中幻灯片。 Swiper 给我点击的幻灯片索引，但是如何使用它来更改居中的幻灯片？

这些是我的选择：

  slidesPerView: 4.5,
  spaceBetween: 20,
  updateOnWindowResize: true,
  loop: true,
  grabCursor: true,
  centeredSlides: true,
  centeredSlidesBounds: true,
  initialSlide: 0,
  on: {
    click() {
      console.log(this.clickedIndex);
    },
  },

【问题讨论】：

你能用 HTML 和 CSS 创建一个小提琴或工作示例吗？否则，任何解决方案都可能与您所看到的不同。

标签： javascript swiper.js

【解决方案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

【讨论】：