SwiperJS 卡布局集成

SwiperJS Card Layout Integration

提问人：Joshua 提问时间：11/14/2023 更新时间：11/15/2023 访问量：30

问：

代码参考：代码沙盒中的示例

我希望能够滑动或单击滑动导航按钮，以便它一次只能使用此布局遍历 1 张幻灯片。这是一个具有固定宽度的。链接中的前两张幻灯片显示了预期的行为，但是当最后两张幻灯片进入视野时，它卡在“2/4”上，我是否错过了在滑动器选项中传递的额外参数？在此处输入图像描述slidesPerView: "auto"

我尝试了以下方法：

  • 在 Swiper 实例化中传递。并给我的元素一个固定的宽度slidesPerView: "auto"swiper-slide
  • 在 Swiper 实例化中传递。并给我的元素一个固定的宽度slidesPerView: 1swiper-slide
javascript html css swiper.js

评论

0赞 Community 11/14/2023
请提供足够的代码，以便其他人可以更好地理解或重现问题。

答：

0赞 imhvost 11/15/2023 #1

Swiper 滑块具有小数分页参数：
codesandbox

评论

0赞 Joshua 11/15/2023
我尝试使用分数参数，虽然它确实显示了“x 中的 1”分页，这是正确的结果。活动索引应为屏幕最左侧的第一个索引。

上一个：如何在 Swiper coverflow 中制作两张侧面幻灯片

下一个：卡未按照我在 swiper.js 中想要的方式对齐 [关闭]