首页 > 解决方案 > Swiper - 移动幻灯片

问题描述

我正在使用来自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"
  })
})

标签: javascriptswiper

解决方案


将属性添加到您的 JS:

slidesPerGroup: 5,

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


推荐阅读