jquery - iDangero.us Swiper 多个实例

Question

我正在尝试在我的网站上添加多个滑动器 ( http://www.idangero.us/swiper/ )。我想添加滑动器动态，因此我为每个滑动器使用相同的类。每个滑动器看起来像这样:

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

但这对我不起作用。我认为这些属性(property)造成了问题。也许我应该做这样的事情更具体，只使用分页/nextButton/...在当前滑动器内而不是在整个网站上:

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

但我不知 Prop 体该怎么做。我该怎么做？

Answer 1

你需要做类似的事情:

$('.swiper-container').each(function(){
    新的刷卡器($(这个)，{
        分页:$(this).find('.swiper-pagination'),
        paginationClickable: $(this).find('.swiper-pagination'),
        nextButton: $(this).find('.swiper-button-next'),
        上一个按钮:$(this).find('.swiper-button-prev'),
        循环:真
    });
});