Swiper Slider - Infinite loop with multi-row slides

Question

I'm using the Swiper by iDangero.us and I'm having difficulty creating an infinite loop of multi-row slides. I have 30 images which I need to group into 3 rows of 5 over 2 slides. Setting loop renders the slides in the grid that I want to achieve and clicking the arrows slides between each one correctly. But I need the slides to be infinite, going back to the original 15 images on the first slide once I reach the end. Setting loop to true breaks this.

What am I doing wrong? Is it possible to do this with this plugin?

Snippet and JSFiddle below.

Any help would be appreciated.

Thanks :)

var swiper = new Swiper('.swiper-container', {
    // loop: true,
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
    slidesPerView: 5,
    spaceBetween: 15,
    slidesPerColumn: 3,
    slidesPerColumnFill: 'row',
    slidesPerGroup: 15
});

* {
    box-sizing: border-box;
}

html,
body {
    margin: 20px 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    width: 100%;
    max-width: 1170px;
    padding: 0 15px;
    margin: 0 auto;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.swiper-slide span {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: black;
    color: white;
    padding: 6px;
    display: block;
    font-size: 20px;
    width: 35px;
    height: 35px;
    text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

<div class="container">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <script>
                for (i = 1; i <= 30; i++) {
                    document.write('<div class="swiper-slide"><img src="http://placehold.it/240x240" class="img-responsive"><span>' + i + '</span></div>');
                }
            </script>
        </div>

        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
    </div>
</div>

JS Fiddle: http://codepen.io/aethyrion/pen/mRVwzE

Dylan Wright Dylan Wright · Accepted Answer · 2017-01-10T20:50:25

What you want is called Recursion. Create a function that re-instantiates your slides and then loops through your slides, and then at the end of the function call your function again. This will recursively call your loop of the same slides.

However you'll want to have some stopping point I would think. If you don't you'll run out of memory eventually.

Create a function, that does this loop and then add it to the script tag in your html.

Swiper Slider - Infinite loop with multi-row slides

1 Answers