Question

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

我做错了什么？是否可以使用此插件执行此操作？

下面的Snippet和JSFiddle。

任何帮助都将不胜感激。

谢谢：）

＆＃13;

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
});

＆＃13;

* {
    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;
}

＆＃13;

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

＆＃13;

JS小提琴：http://codepen.io/aethyrion/pen/mRVwzE

Answer 1

你想要的是递归。创建一个重新实例化幻灯片然后遍历幻灯片的函数，然后在函数结束时再次调用您的函数。这将以递归方式调用相同幻灯片的循环。

然而，你会想要一些我想到的停止点。如果你不这样做，你最终会耗尽内存。

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

Swiper Slider - 带有多排滑块的无限循环

1 个答案: