根据此处提供的说明作为答案...

iDangerous Swiper plugin reset slides

我正在尝试做这样的事情:

http://jsfiddle.net/monastic/ydKn2/17/

<div id="slide-repo">
    <div class="swiper-slide">
        <img src="http://dummyimage.com/100x100/000/fff.jpg" />
    </div>
    ...................
</div>

<div>
    <button id="update-slides">Update Slides</button>
</div>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="http://dummyimage.com/100x100/ff0000/fff.jpg" />
        </div>
        .................
    </div>
</div>


var mySwiper = new Swiper('.swiper-container', {
     mode: 'vertical',
     loop: true,
     loopAdditionalSlides: 5,
     centeredSlides: true,
     slidesPerView: 2,
     initialSlide: 0,
 });

$('button#update-slides').on('click', function(){

    var swiperWrapper = $('.swiper-wrapper'),
        newSlides = $('#slide-repo').children('.swiper-slide').clone(true);

    mySwiper.destroy();
    swiperWrapper.empty().append(newSlides);
    $('.swiper-wrapper').attr('style', '');
    mySwiper.reInit();

});

但是控制台返回“无法读取null的属性” init”。

有什么建议么?

最佳答案

我相信这是因为您正在调用mySwiper.destroy(),因此无法运行reInit()。文档说reInit用于在添加或删除幻灯片后进行重置。但是在这里,您正在对不再是掠夺者的元素调用reInit。

相反,您可以每次重新创建刷卡器。 (我不确定为什么只调用removeAllSlides而不是reInit不会保持相同的设置。)

  var settings = {
    mode: 'vertical',
    loop: true,
    loopAdditionalSlides: 5,
    centeredSlides: true,
    slidesPerView: 2,
    initialSlide: 0,
  },
  mySwiper = new Swiper('.swiper-container', settings);

$('button#update-slides').on('click', function(){

    var swiperWrapper = $('.swiper-wrapper'),
        newSlides = $('#slide-repo').children('.swiper-slide').clone(true);

    mySwiper.destroy();
    swiperWrapper.empty().append(newSlides);
    $('.swiper-wrapper').attr('style', '');
    mySwiper = new Swiper('.swiper-container', settings);

});

fiddle :http://jsfiddle.net/L2HJK/2/

关于jquery - iDangerous Swiper,后续的destroy()和reInit()方法,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24715793/

10-11 00:19