Swiper Slider - 带有多排幻灯片的无限循环

Question

我正在使用 iDangero.us 的 Swiper，但在创建多行幻灯片的无限循环时遇到了困难。我有 30 张图像，我需要将它们分成 3 行，每行 5 张，超过 2 张幻灯片。设置loop 会在网格中呈现我想要实现的幻灯片，然后正确单击每个幻灯片之间的箭头。但是我需要幻灯片是无限的，一旦我到达终点，就会回到第一张幻灯片上的原始 15 张图像。将 loop 设置为 true 会破坏这一点。

我做错了什么？这个插件可以做到吗？

下面的代码片段和 JSFiddle。

任何帮助将不胜感激。

谢谢:)

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 小提琴：http://codepen.io/aethyrion/pen/mRVwzE

Answer 1

你想要的叫做递归。创建一个重新实例化幻灯片的函数，然后循环播放幻灯片，然后在函数结束时再次调用您的函数。这将递归地调用相同幻灯片的循环。

但是，我认为您会想要一些停止点。如果你不这样做，你最终会耗尽内存。

创建一个函数，执行此循环，然后将其添加到 html 中的脚本标记中。