iDangerous Swiper, subsequent destroy() and reInit() methods

Question

According to the directions provided as an answer here...

iDangerous Swiper plugin reset slides

I'm trying to do something like this:

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

});

But console is returning 'Cannot read property 'init' of null'.

Any suggestions?

Solution

I believe this is because you're calling mySwiper.destroy() and therefore can't run reInit(). The documentation says reInit is for resetting when you've added or removed slides. But here you're calling reInit on an element that is no longer a swiper.

Instead, you could re-create the swiper each time. (I'm not sure why just calling removeAllSlides then reInit does not keep the same settings.)

  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/

Comments

[monastic]

This is probably on the right track, but you'll see in your fiddle that the re-initialized swiper isn't functional with regard to loop mode. I suspect the solution probably does involve a destroy() call, but I'm having a hard time seeing how this would work for a highly dynamic slider, destroy-ing and reinit-ing with multiple successions..

[cjspurgeon]

Interesting. You're right, I didn't notice that the settings didn't carry over. You can always re-create it after destroying it, with the same settings: jsfiddle.net/L2HJK/2 I'll update my answer.

[monastic]

Oh, that looks like it! Hmm, I must've been overthinking this somewhere...but excellent, thanks!