JS Fiddle: https://jsfiddle.net/mey9zgfr/7/
For some mysterious reason, when I add one slide in a slider, three slides are added. I've never encountered such a strange problem using Swiper.
Intitally I thought that this bug happens because of slidesPerView param is set to 4, but I only have 1 slide in my Swiper. So I tried to increase amount of slides up to 4, but that didn't work, it gave 12 slides in result.
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>
question from:
https://stackoverflow.com/questions/66053542/why-are-three-slides-added-instead-of-one-when-i-add-a-slide-to-swiper-slider 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
