为 Swiper 添加填充以滑动

Question

我想给幻灯片添加填充，Swiper 为幻灯片外部（包装间隙）提供了参数 spaceBetween。现在我需要在幻灯片内填充，我尝试将填充添加到 .swiper-slide 但它破坏了滑动器的整个结构。

const swiper = new Swiper('.swiper', {
  loop: true,
  slidesPerView: 2,
  spaceBetween: 30
});

.swiper {
  width: 300px;
  height: 150px;
  background-color: gray;
}

.swiper-slide {
  padding: 15px;
  background-color: green;
  color: white;
}

<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>
</div>

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

Answer 1

你应该给你的 .swiper-slide padding 和 box-sizing: border-box; 这样做：

const swiper = new Swiper('.swiper', {
  loop: true,
  slidesPerView: 2,
  spaceBetween: 30
});

.swiper {
  width: 100%;
  height: 150px;
  background-color: gray;
}

.swiper-slide {
  background-color: green;
  position:relative;
  color: white;
  padding:20px;
  box-sizing: border-box;
}
.padding{
  max-width:100%;
background:red;
}
.swiper-wrapper{
  width: 100%;
  height: 100%;
}

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
    <div class="padding">Slide 1</div>
    <div>example 1</div>
    <div>example 2</div>
    <div>example 3</div>
    </div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

为 Swiper 添加填充以滑动

Add padding to slide for Swiper

javascript

css

swiper