我按照文档设置了Swiper Slider，并且每张幻灯片都好像是一张。
<div class="swiper-container">
<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>
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
slidesPerView: 1,
});
我也在CodePen上对其进行了测试，结果相同，所以我知道它不在我的项目中：https ://codepen.io/DasRollo/pen/YzzMrgP
有人可以复制吗？
在您的Codepen中，您忘了包含插件也需要正常工作的CSS。不能完全确定这是否就是您要发布的内容，但是如果是，请尝试下面的代码。
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
slidesPerView: 1,
});.swiper-slide {
padding: 2em;
border: 1px solid #ccc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div> 本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句