
In this article, I am going to describe how to make nfinite loop slider which continue to flow automatically.
I’m going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.
[Swiper]How to create simple responsive slider with swiper.js
①Make a slider which does not have arrows and dots
Arrows and dots are not unnecessary because we are going to make a slider which continue to flow automatically.
Set loop option true.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
</div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true,
})
</script>
Now we can see a slider which does not have arrows and dots.
You can move the slide with swiping.
②Make the slides autoplay
Make the slides autoplay by autoplay option.
Set delay option 0 to move slide automatically without stopping.
const swiper = new Swiper('.sample-slider', {
loop: true,
autoplay: { //add
delay: 0, //add
}, //add
})
Autoplay slider has been created.
③Change slide speed and number of shown items
We can change slide speed by speed option, and number of shown items by slidesPerView option.
const swiper = new Swiper('.sample-slider', {
loop: true,
autoplay: {
delay: 0,
},
speed: 3000, //add
slidesPerView: 3, //add
})
④Smooth motion of slide
Smooth motion of slide by adding CSS as below.
.sample-slider .swiper-wrapper{
transition-timing-function: linear;
}
Infinite loop slider has been created!
The full text of source code
In the end,I put the full text of source code.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
.sample-slider .swiper-wrapper{
transition-timing-function: linear;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
</div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true,
speed: 2000,
slidesPerView: 3,
autoplay: {
delay: 0,
},
})
</script>
That is all,it is about how to make infinite loop slider with swiper.js.
I have been introduced various slider which can be made by swiper.js.
Swiper Demo 16 Slider
Thank you very much, I have been looking for this for a while.
Muchas gracias, es el unico que me ha funcionado