Swiper.js 幻灯片宽度

Question

Swiper.js 有一个大问题
\n是否有可能以某种方式使幻灯片的宽度再次等于内容的宽度？
\n目前，所有幻灯片都拉伸到父级的整个宽度，很可能是因为我设置了容器网格元素
\n我已经尝试解决这个问题很长时间了，但我只能\xe2\x80\x99t告诉我我将不胜感激！！！
\n（附截图）\n在此处输入图像描述

\n

Answer 1

SlidesPerView：“自动”

在 CSS 中：（在swiper-slide组件本身上。）

.swiper-slide{
 width: fit-content;
}

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,
});