Swiper.js滑动宽度

Question

Swiper.js有个大问题

是否有可能使幻灯片的宽度再次与内容的宽度相等？

目前，所有幻灯片都延伸到父元素的全部宽度，这很可能是因为我设置了容器网格元素。

我一直试图解决这个问题很长时间，但我只是不能告诉我，我会感激！

(截图附后) 在这里输入图像描述

Answer 1

flex-shrink: 100 !important;
width: **set according to your design**;

它起作用了!

Answer 2

据我所知，没有一种标准的方法使幻灯片的宽度等于内容的宽度。但是，您可以在CSS文件中手动为每一张幻灯片指定所需的宽度，如下所示：

HTML:

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

CSS:

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide {
    width: 50%;
}

.swiper-slide:nth-child(2n) {
    width: 20%;
}

.swiper-slide:nth-child(3n) {
    width: 40%;
}

还在CSS文件中导入这两行代码：

swiper/css
swiper/css/bundle

JS:

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