[Swiper] How to make infinite loop slider

infinite_loop_slider

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.

slide_image1
slide_image2
slide_image3
slide_image4




②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.

slide_image1
slide_image2
slide_image3
slide_image4




③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
})
slide_image1
slide_image2
slide_image3
slide_image4




④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!

slide_image1
slide_image2
slide_image3
slide_image4




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

You can subscribe by SNS

Sponcerd Link

Popular Posts

コメント

  1. grappa says:

    Thank you very much, I have been looking for this for a while.

  2. Edgar says:

    Muchas gracias, es el unico que me ha funcionado

*