Swiper js duplicated slides - swiper.js

Question

I am facing an issue in swiper js. When it has only 2 slides it duplicates the slides one more time. I don't need loop and when it is 3 and less than 3 i don't need navigation too. I have tried loopDestroy() function, but when i use this it displays blank space after last slide. Here's the code.
var swiperproject = new Swiper(".project-details-swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 1,
//loop: true,
loopFillGroupWithBlank: true,
});

Answer 1

loop by is nature "duplicate" slides.
You can add your own logic and pass loop true/false related to this logic.
let loop_slider = true;
let num_of_slides = 4;
let num_of_slides_before_init = document.querySelectorAll(".swiper-slide").length;
if(num_of_slides_before_init < num_of_slides){
loop_slider = false;
}
Snippet example:
let loop_slider = true;
const num_of_slides = 4;
let swiper_sliders = document.querySelectorAll(".swiper");
// forEach method, could be shipped as part of an Object Literal/Module
// for class
for (const this_slider of swiper_sliders){
//work as per usual
let num_of_slides_before_init = this_slider.querySelectorAll(".swiper-slide").length;
if(num_of_slides_before_init < num_of_slides){
loop_slider = false;
}
var swiper = new Swiper(this_slider, {
slidesPerView: 3,
loop: loop_slider,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
};
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
[scroll]{
min-height: 100vh;
background: gray;
}
<link href="https://cdn.jsdelivr.net/npm/swiper#8.4.5/swiper-bundle.min.css" rel="stylesheet"/>
<h1>Loop true (Dynamic)</h1>
<div class="swiper mySwiper">
<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 class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-pagination"></div>
</div>
<br><br>
<h1>Loop false (Dynamic)</h1>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>