Swiper - 移动幻灯片

Posted 2023-05-08

【中文标题】Swiper - 移动幻灯片

【英文标题】：Swiper - moving slides

【发布时间】：2019-09-28 07:41:41

【问题描述】：

我正在使用来自https://idangero.us/swiper/api/ 的 Swiper 插件。 我在 Swiper 中有 20 个项目，每张幻灯片分两行 10 个项目。

当我单击活动项目符号旁边的分页项目符号时，它只会向右移动一列项目。我只需要在分页中有两个项目符号，那么如何设置每张幻灯片移动 10 个项目？

$(document).ready(function() 
  new Swiper(".clients-swiper-container", 
      pagination: ".swiper-pagination-clients",

      paginationClickable: true,
      slideToClickedSlide: true,
      slidesPerView: 5,
      slidesPerColumn: 2,
      spaceBetween: 20,
      nextButton: ".swiper-button-next3",
      prevButton: ".swiper-button-prev3"
  )
)

【问题讨论】：

请在问题中提供一个工作示例，以便更好地理解问题

请看一下

【参考方案1】：

为你的 JS 添加属性：

slidesPerGroup: 5,

这里是 jsfiddle：http://jsfiddle.net/Dinty/0uwyzdse/5/