删除滑动元素之间的边距

Question

我正在使用来自 swiperjs.com 的滑块：

https://codesandbox.io/p/sandbox/vrs48z?file=%2Findex.html%3A9%2C45

我想知道是否有办法消除幻灯片之间的边距空间。

我可以通过将

margin-right:50px;

更改为

34px

从 DevTool 中编辑它们

<div class="swiper-slide">

风格

Answer 1

您可以在

Swiper API documentation

中使用 spaceBetween 参数描述器

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

Answer 2

您可以通过为您的滑动器元素提供

margin: 0

来实现此目的。

Answer 3

只需将

margin-right:0px !important

添加到您的

swiper-slide

课程

.swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-right: 0px !important; // Add this line
}

快乐编码:)