iDangero.us Swiper 多个实例

Question

我正在尝试在我的网站上添加多个刷卡器 (http://www.idangero.us/swiper/)。我想添加动态滑动器，所以我对每个滑动器使用相同的 class。每个刷卡器看起来像这样：

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                Slide 1
            </div>
            <div class="swiper-slide">
                Slide 2
            </div>
            <div class="swiper-slide">
                Slide 3
            </div>
            <div class="swiper-slide">
                Slide 4
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

如果我只想初始化一个刷卡器，使用此代码一切正常：

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true
});

我想要的是在一个页面上实例化多个滑动器，像这样：

var swipes = [];
$('.swiper-container').each(function(i, obj){
    swipes[i] = new Swiper(obj, {
        pagination: '.swiper-pagination',
        paginationClickable: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        loop: true
    });
});

但这对我不起作用。我认为这些财产正在引起问题。也许我应该做这样的事情更具体，只用于分页/ nextButton / ...在当前的滑动器内而不是在整个网站上：

pagination: obj + '.swiper-pagination',
paginationClickable: obj + '.swiper-pagination',
nextButton: obj + '.swiper-button-next',
...

但我不知道具体怎么做。我该怎么做？

Answer 1

您需要执行以下操作： </p> <pre><code>$('.swiper-container').each(function(){ new Swiper($(this), { pagination: $(this).find('.swiper-pagination'), paginationClickable: $(this).find('.swiper-pagination'), nextButton: $(this).find('.swiper-button-next'), prevButton: $(this).find('.swiper-button-prev'), loop: true }); });

iDangero.us Swiper 多个实例

iDangero.us Swiper multiple instances

jquery

swiper