'Swiper JS infinite carousel shift
I wanted to make an endless carousel with swiper js on my site and it works, but when you look carefully, there is a small vibration between the slides, it seems like the image is flickering, and I couldn't find a solution for this, I would like to say that I am very happy in advance if you can help :) I want it to move smoothly.
HTML
<div class="partners-main-body">
<div class="swiper default-partners">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="partners-slider-item">
<img src="dist/img/logo-axa.jpg" alt="Axa" />
</div>
</div>
<div class="swiper-slide">
<div class="partners-slider-item">
<img src="dist/img/logo-axa.jpg" alt="Axa" />
</div>
</div>
<div class="swiper-slide">
<div class="partners-slider-item">
<img src="dist/img/logo-axa.jpg" alt="Axa" />
</div>
</div>
<div class="swiper-slide">
<div class="partners-slider-item">
<img src="dist/img/logo-axa.jpg" alt="Axa" />
</div>
</div>
<div class="swiper-slide">
<div class="partners-slider-item">
<img src="dist/img/logo-axa.jpg" alt="Axa" />
</div>
</div>
<div class="swiper-slide">
<div class="partners-slider-item">
<img src="dist/img/logo-axa.jpg" alt="Axa" />
</div>
</div>
</div>
</div>
</div>
Swiper JS Settings:
var defpartners = new Swiper('.default-partners', {
loop: true,
speed: 2500,
grabCursor: true,
centeredSlides: true,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
breakpoints: {
320: {
slidesPerView: 1.5,
spaceBetween: 16,
},
545: {
slidesPerView: 2,
spaceBetween: 16,
},
991: {
slidesPerView: 3,
spaceBetween: 16,
},
1124: {
slidesPerView: 4.2,
spaceBetween: 30,
},
},
})
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|