我想為幻燈片添加填充，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>uj5u.com熱心網友回復：
你應該padding這樣
做：box-sizing: border-box;.swiper-slide
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/468434.html
標籤：javascript css 刷卡器