[Swiper] How to make infinite loop slider

In this article, I am going to describe how to make nfinite loop slider which continue to flow automatically.

I’ｍ 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

Contents

①Make a slider which does not have arrows and dots
②Make the slides autoplay
③Change slide speed and number of shown items
④Smooth motion of slide
The full text of source code

①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