如何解决我的 Swiper Slider 中的图像幻灯片有什么问题?
我的 SwiperJS Slider 中的图片幻灯片有什么问题?当我重新加载网页时,图片幻灯片在几秒钟内变得太大,然后又缩小到正常状态?请看下面的图片。如果您想重现问题,我也添加了代码。将HTML、CSS、JS复制到一个HTML文件中,然后运行代码,因为这里无法刷新网页。
gallery = new Swiper('.swiper__container',{
slidesPerView: 4,pagination: {
el: '.swiper__pagination',clickable: true
}
});
.gallery {
max-height: 360px;
}
.swiper__container {
overflow: hidden;
}
.wrapper {
position: relative;
padding: 0 0 100% 0;
}
.wrapper img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<section class="gallery">
<div class="swiper__container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="wrapper">
<img src="http://lorempixel.com/360/360/sports" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="wrapper">
<img src="http://lorempixel.com/360/360/sports" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="wrapper">
<img src="http://lorempixel.com/360/360/sports" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="wrapper">
<img src="http://lorempixel.com/360/360/sports" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="wrapper">
<img src="http://lorempixel.com/360/360/sports" alt="" />
</div>
</div>
</div>
<div class="gallery__pagination swiper-pagination-white"></div>
</div>
</section>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。