如何解决防止 SwiperJS 滑过最后一张幻灯片
更新信息:
我注意到 swiper-wrapper 的宽度为 4816 像素,四张幻灯片中的每一张的宽度均为 1174 像素:
<div class="swiper-wrapper" style="width: 4816px; transform: translate3d(0px,0px,0px);">
<div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 1174px; margin-right: 30px;">
<div class="card-content">
<div class="card-header">
<span>heading</span>
</div>
我已经研究了几个小时,但我正在努力弄清楚如何防止 swiper 滚动到最后一张幻灯片之外。 swiper 设置了四个幻灯片,它们都具有固定宽度(无响应)。当视口宽度小于 swiper 容器的宽度时,SwiperJS 被激活。但是,它允许用户滑动到最后一张(最右边)幻灯片之外。
JavaScript
const swiper = new Swiper('.swiper-container',{
observer: true,observeParents: true,spaceBetween: 30,allowSlideNext: false,freeMode: true,resistanceRatio: 0,watchSlidesVisibility: true,watchSlidesProgress: true,breakpoints: {
1200: {
allowSlideNext: true,},});
HTML swiper 标记是典型的:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slider 1
</div>
<div class="swiper-slide">
Slider 2
</div>
<div class="swiper-slide">
Slider 3
</div>
<div class="swiper-slide">
Slider 4
</div>
</div>
</div>
CSS
.swiper-container {
max-width: 1220px !important;
}
.swiper-container-product-cards {
margin: 0 auto;
max-width: 1250px;
position: relative;
overflow: hidden;
list-style: none;
padding: 0 5px;
z-index: 1;
}
.swiper-slide {
text-align: center;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-Box;
border: 0;
border-radius: 0;
height: 578px;
width: 287px !important;
justify-content: space-around;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。