如何使用slidesPerview更改swiperjs中幻灯片的宽度？

Question

我试图让我的滑动器看起来像这样，活动幻灯片居中，上一张和下一张幻灯片在侧面显示一点。

但是，我不知道如何更改幻灯片的宽度并保持幻灯片居中

https://codesandbox.io/s/empty-wind-yxj67v?file=/index.html

.box {
  max-width: 1440px;
  display: flex;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
}
.box .banner-swiper {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.box .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.box .swiper-wrapper .prev-slide,
.box .swiper-wrapper .next-slide {
  opacity: 0.4;
}
.box .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .swiper-slide {
  width: 1000px;
}
.box .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box .navigation {
  display: block;
  position: absolute;
  width: 120px;
  height: 56px;
  z-index: 50;
  bottom: 16px;
  right: 236px;
}
.box .navigation .previous {
  margin-right: 8px;
}
.box .navigation .previous,
.box .navigation .next {
  width: 56px;
  height: 56px;
  background-color: #424142;
}
.box .navigation .previous i,
.box .navigation .next i {
  color: white;
}

Answer 1

检查后，内联样式会覆盖您的

.box .swiper-slide {width}

属性。如果您希望明确将幻灯片设置为 1000 像素，请使用

!important

。

我建议至少使用更具响应性的方法。如果滑块跨越屏幕，请考虑使用

75vw

作为测量值。

Answer 2

以防万一有人像我一样并且也在为此苦苦挣扎，我想我会分享我的解决方案。我想做的正是原始海报想要做的事情，以设定的最大宽度（在我的情况下在 Bootstrap 的容器宽度内）设置幻灯片，居中并循环。

我的解决方案是将滑块放置在带有

.container

的 div 中（Bootstrap 设置最大宽度为 1320px），并在

overflow: visible

上设置

.swiper

。然后，我将所有这些内容封装在一个带有

.container-fluid

的 div 中，因此基本上是 100% 的屏幕并设置

overflow: hidden

。 这工作得很好，但幻灯片没有正确循环，当我看到幻灯片末尾时，会出现一个空白。难题的最后一部分是设置

slidesPerView: 1.0001,

允许 swiper 正确配置我的循环，但它的数字很小，肉眼不可见。有点老套，但我花了太长时间才让它发挥作用。

这就是全部内容：

HTML：

 <div class="container-fluid overflow-hidden g-0">
        <div class="container">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        slide 1
                    </div>
                    <div class="swiper-slide">
                        slide 2
                    </div>
                    <div class="swiper-slide">
                        slide 3
                    </div>
                    <div class="swiper-slide">
                        slide 4
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS：

.swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

JS：

var swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    slidesPerView: 1.0001,
    centeredSlides: true,
    loop: true,
});

Answer 3

您可以设置slidesPerView={3}并为swiper容器设置负边距。