如何使用 swiper js 插件使滑块卡更小并将它们组合在一起而不会出现空白或溢出[关闭]

Question

使用 html、css、js 创建带有 swiper js 插件的响应式卡片滑块，我将每张卡片变小，例如 40%，并使用例如 -20vw 在每次滑动时在屏幕上显示 2 张卡片，当我这样做时，向右滚动时，我最终看到空格，或者更确切地说，溢出而不是看到结尾。

我使用 ChatGPT 来寻找解决方案，我意识到这是 -20vw 边距的原因......但问题是，我希望卡片靠近，而不是每次滑动时屏幕上都出现一张卡片......我' M 在电子商务网站工作。

以 JUMIA.NG 为例

Answer 1

如果您使用 swiperjs (swiperjs.com) 插件并且希望每次查看多于一张幻灯片，那么您需要使用

slidesPerView

参数初始化滑块。请参阅：https://swiperjs.com/swiper-api#param-slidesPerView。

示例：

var swiper = new Swiper('.swiper', {
  ...,
  slidesPerView : 2,
  ...
});

如果您需要每个视图、每个断点有不同数量的幻灯片，那么您可以使用断点参数。您可以在这里阅读更多相关信息：https://swiperjs.com/swiper-api#param-breakpoints。

如果需要控制滑块的宽度，则应设置 width 参数。

var swiper = new Swiper('.swiper', {
  ...,
  width: 600,
  ...
});