【发布时间】：2021-05-09 05:17:52
【问题描述】：
JS 小提琴：https://jsfiddle.net/mey9zgfr/7/
由于某种神秘的原因，当我在滑块中添加一张幻灯片时，会添加三张幻灯片。我在使用 Swiper 时从未遇到过如此奇怪的问题。
最初我认为这个错误发生是因为 slidesPerView 参数设置为 4，但我的 Swiper 中只有 1 张幻灯片。所以我尝试将幻灯片数量增加到 4 张，但这没有用，结果是 12 张幻灯片。
let swiper = new Swiper("#albums_slider", {
direction: "horizontal",
spaceBetween: 30,
slidesPerView: 4,
loop: true,
allowTouchMove: false,
speed: 600,
autoplay: {
delay: 3000
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}); #albums_slider {
width: 90%;
margin: 0 auto;
margin-bottom: 150px;
}
.swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border: 1px solid #ccc;
color: var(--third-color)!important;
text-decoration: none!important;
}
.swiper-slide:hover {
text-decoration: none!important;
}
.swiper-slide .title {
width: 100%;
padding: 15px;
border-bottom: 1px solid #ccc;
text-align: center;
font-size: 22px;
}
.swiper-slide .description {
width: 100%;
padding: 5px;
border-bottom: 1px solid #ccc;
text-align: center;
font-size: 18px;
}
.swiper-slide .price {
width: 100%;
padding: 15px;
border-bottom: 1px solid #ccc;
text-align: center;
font-size: 20px;
}
.swiper-slide img {
width: 100%;
height: auto;
}
.swiper-button-next, .swiper-button-prev {
outline: none;
color: #000!important;
} <head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<div class="swiper-container" id="albums_slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="" class="image"><img src="https://paspahang.org/wp-content/uploads/2018/12/collect-the-incredible-funny-cat-memes-hit-man-of-funny-cat-memes-hit-man.gif" alt=""></a>
<div class="title">Album1</div>
<div class="description">Info</div>
<div class="price">$$$</div>
</div>
</div>
</div>任何帮助将不胜感激
附言SO不允许我发布问题，因为“看起来您的帖子主要是代码；请添加更多详细信息”，因为我没有其他要添加的内容，所以我将其放在这里：
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim 广告 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 偏执。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。
【问题讨论】：
-
您加载了两次 Swiper 库：
swiper-bundle.js和swiper-bundle.min.js。你不需要他们两个。 -
但删除重复项并不能解决问题.....
-
看起来是因为
slidesPerView: 4，但是没有足够的不同幻灯片，所以它复制了它们。 -
@Barmar 我最初也是这么想的，但后来尝试将幻灯片数量增加到 4 个，结果是 12
标签： javascript html css swiper