想在我的滑块包装器上设置填充,当我手动执行此操作时,例如我在包装器或任何父div上设置
padding-left:15px;
,最后一张幻灯片无法正确显示,实际上15个像素被溢出隐藏了。
我正在使用 swiper-bundle.6.5
渲染的html:
<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-rtl swiper-container-android px-3">
<div class="swiper-wrapper" id="swiper-wrapper-44269aed36ad10c2c" aria-live="polite" style="transform: translate3d(330px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide" style="width: 210px; margin-left: 10px;" role="group" aria-label="1 / 3">
mySlide1
</div>
<div class="swiper-slide swiper-slide-prev" style="width: 210px; margin-left: 10px;" role="group" aria-label="2 / 3">
mySlide2
</div>
<div class="swiper-slide swiper-slide-active" style="width: 210px; margin-left: 10px;" role="group" aria-label="3 / 3">
mySlide3
</div>
</div>
</div>
js:
new SwipeLoader(_swiper_target, {
debugger: true,
direction: 'horizontal',
pagination: {
el: '.' + unique_id + ' .swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.' + unique_id + ' .swiper-button-next',
prevEl: '.' + unique_id + ' .swiper-button-prev'
},
slidesPerView: 1.5,
spaceBetween: 10,
breakpoints: {
320: {
slidesPerView: 1.5,
spaceBetween: 10
},
480: {
slidesPerView: 1.5,
spaceBetween: 10
},
640: {
slidesPerView: 1.5,
spaceBetween: 10
},
800: {
slidesPerView: 3,
spaceBetween: 10
}
}
});
谢谢
创建盒子“容器”
示例
.courses .slide {
width: 10rem;
background-color: #4b4b4b;
border-radius: .5rem;
text-align: center;
margin-bottom: 4rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.courses .slide .container {
padding: 2rem;
}
.courses .slide .container img {
height: 20rem;
width: 100%;
}
.courses .slide .container h3 {
margin: 1.5rem 0;
font-size: 2rem;
color: #fff;
}
.courses .slide .container p {
line-height: 2;
font-size: 1.6rem;
color: #aaa;
}
<section class="courses">
<h1 class="heading">our <span>courses</span></h1>
<div class="swiper course-slider">
<div class="swiper-wrapper">
<div class="swiper-slide slide">
<div class="container">
<img src="" alt="">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
</div>
</div>
<div class="swiper-slide slide">
<div class="container">
<img src="" alt="">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
</div>
</div>
<div class="swiper-slide slide">
<div class="container">
<img src="" alt="">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
</div>
</div>
<div class="swiper-slide slide">
<div class="container">
<img src="" alt="">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
</div>
</div>
<div class="swiper-slide slide">
<div class="container">
<img src="" alt="">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
</div>
</div>
<div class="swiper-slide slide">
<div class="container">
<img src="" alt="">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptate excepturi adipisci rem magni culpa officia ipsam pariatur voluptatem consequatur!</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>