iDangero.us Swiper多实例

Question

我正试着在我的网站上添加多个刷子(http://www.idangero.us/swiper/)。我想添加动态的swipers，这样我就可以对每个swiper使用相同的类。每个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>

如果我只想初始化一个swiper，那么使用下面的代码一切正常：

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

我想要的是在一个页面上实例化多个swipers，如下所示：

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 / ...在当前的swiper中，而不是在整个站点上：

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

但我不知道该怎么做。我该怎么做呢？

Answer 1

你需要做一些类似的事情：

$('.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
    });
});

​