I'm using this kind of configuration for swiper:
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
slidesPerView: 3,
speed: 2500,
centeredSlides: true,
autoplay: 1000,
autoplayDisableOnInteraction: false,
loop: true
});
This works fine so far. But is it possible with the swiper not to stop between each 3 slides? Right now there is always a break until the next 3 slides slide in. I'm looking for an infinite continuous looping slider option. Is this possible?
Yes it's possible, big up mariorendic
var swiperOptions = {
loop: true,
freeMode: true,
spaceBetween: 0,
grabCursor: true,
slidesPerView: 7,
loop: true,
autoplay: {
delay: 1,
disableOnInteraction: true
},
freeMode: true,
speed: 5000,
freeModeMomentum: false
};
var swiper = new Swiper(".swiper-container", swiperOptions);
body {
margin: 0;
padding: 0;
background: #eee;
font-family: sans-serif;
font-size: 14px;
background: #404449;
}
.swiper-container {
height: calc(100vh - 120px);
margin: 60px;
}
.swiper-slide {
width: 28vw;
overflow: hidden;
background-position: top;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
font-weight: bold;
}
.swiper-wrapper {
-webkit-transition-timing-function:linear!important;
-o-transition-timing-function:linear!important;
transition-timing-function:linear!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url(https://placekeanu.com/250/g);">1</div>
<div class="swiper-slide" style="background-image: url(https://placekeanu.com/260);">2</div>
<div class="swiper-slide" style="background-image: url(https://placekeanu.com/270);">3</div>
<div class="swiper-slide" style="background-image: url(https://placekeanu.com/270/y);">4</div>
<div class="swiper-slide" style="background-image: url(https://placekeanu.com/280/y);">5</div>
<div class="swiper-slide" style="background-image: url(https://placekeanu.com/190/y);">6</div>
<div class="swiper-slide" style="background-image: url(https://placekeanu.com/300/);">7</div>
</div>
</div>
https://codepen.io/tristanisginger/pen/dypxRbv
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With