I’m using the swiper slider in the my website.
When I have slides per view more then 1 for example, 4 then when I load page 1 slide showing then after sometime it adjust to 5 slides in swiper slider.
https://swiperjs.com/swiper-api
<!-- Slider main container -->
<div class="swiper">
<!-- 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>
var slider = new Swiper(".swiper-container", {
"slidesPerView":"4",
"slidesToScroll":1,
"spaceBetween":15,
"freeMode":false,
"loop":true,
"lazy":true,
"preloadImages":false,
"swiperElementNodeName": 'swiper-container',
"autoplay": {
"delay": 2500
},
"navigation":{
"nextEl":".swiper-button-prev",
"prevEl":".swiper-button-next"
},
"breakpoints":{
"1200":{
"slidesPerView": 4
},
"767":{
"slidesPerView":2.5,
"freeMode":true,
"loop":true
},
"480":{
"slidesPerView":1.5
}
}
});
When page render slides width should calculate and 4 slides should display from initial page load.