[Swiper] How to make infinite loop slider

infinite loop slider

In this article, we are going to describe how to make infinite loop slider which continue to flow automatically using swiper.js.


We are 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 a simple slider with swiper.js



①Make a slider without arrows and dots

Arrows and dots are 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




⑤Stop the autoplay when hovering

Some visitors to your website perhaps sometimes want to stop the autoplay slider and concentrate
a specific slide.
For such visitors, lets make our infinite loop slider more better.

By adding pauseOnMouseEnter: true, you can pause the autoplay when hovering.
By adding disableOnInteraction: false, you can resume autoplay when the hover is removed.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    autoplay: {
        delay: 0,
        pauseOnMouseEnter: true,        // added
        disableOnInteraction: false,    // added
    },
    speed: 3000,
    slidesPerView: 3,
})

The autoplay would stop when hovering, and would restart when the hover is removed.
It would not stop instantly but stop at the end of slide switching.

slide_image1
slide_image2
slide_image3
slide_image4





⑥Reverse the autoplay direction

We can reverse the autoplay direction by adding reverseDirection: true into autoplay option.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    autoplay: {
        delay: 0,
        pauseOnMouseEnter: true,
        disableOnInteraction: false,
        reverseDirection: true,         // added
    },
    speed: 3000,
    slidesPerView: 3,
})


The autoplay direction has reversed.

slide_image1
slide_image2
slide_image3
slide_image4






About loop not working

We noticed that some of the web developers were discussing issues with a loop not functioning properly.
We have investigated the causes and solutions and compiled them into a separate article.
If you are experiencing problems with the loop not working correctly or stopping midway, please refer to this article for more information.

loop with slidesPerView not working in Swiper 9 and 10






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,
            pauseOnMouseEnter: true,        // stop autoplay when hovering
            disableOnInteraction: false,    // restart autoplay when hover is removed
            reverseDirection: true,         // reverse the autoplay direction
        },
    })
</script>




That is all,it is about how to make infinite loop slider with swiper.js.

Sponsored Link

You can subscribe by SNS

Sponcerd Link

Comments

  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

  3. Felix says:

    Hi many thanks! I need to add this infinite loop swiper slider in wordpress. Can you give some additional details to deal with it? Have I to add this code into an index.php? Is it necessary to add it into my CSS personalized builder? Thanks!

    1. sada says:

      Thank you for your question, Felix.

       

      ・Where to put the code
      It depends on which page you want to display infinite loop swiper slider on.
      Usually, you don’t need to modify the index.php file in WordPress.
      If you are creating a static page from the WordPress admin dashboard and want to add HTML code to it, the following article can be helpful as a reference.
      https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/

       

      ・If necessary to add it into your CSS personalized builder
      In conclusion, it is not mandatory. This source code is designed to function purely as HTML. However, from a maintainability perspective, it is better to separate styles into a CSS file.
      https://www.geeksforgeeks.org/difference-between-inline-internal-and-external-css/

       

      If you have any further questions or uncertainties, please feel free to ask!

  4. Vivek says:

    how to stop infinite slider on hover. On hover it have to stop instantly please reply

    1. sada says:

      Thanks for your question, Vivek!

       

      I found the way which stop autoplay when hovering but not instantly.
      I think we can not stop the slider until the end of switching.

       

      I added a section which explain about how stop the autoplay when hovering in this article
      ⑤Stop autoplay when hovering

  5. yusef says:

    hi. how to use this in react component??

    1. sada says:

      Thanks for your comment, yusef.

      I haven’t used Swiper with React before, so I’ll do some research.
      Please give me 2 or 3 days. I’ll let you know here as soon as I find out.

    2. sada says:

      Hello Yusef, I apologize for the wait.

       

      I have created an article on how to use the “infinite loop slider” in a React component.
      [Swiper×React]How to make infinite loop slider

       

      If you have any additional questions or need further clarification, please feel free to ask.

  6. Md sakib hosan says:

    Thanks for sharing this. how can we make the slider left to right?

    1. sada says:

      Thanks for your comment, Md sakib hosan!

       

      I added a section which tells about how to make the slider left to right.
      Please check it!
      ⑥Reverse the autoplay direction

  7. Roberto Enrique Briceno Garcia says:

    Thank you so much!

Leave a Reply

*