Jquery i危险的Swiper，随后的destroy（）和reInit（）方法

根据这里作为答案提供的说明

我正在尝试这样做：

...................   
更新幻灯片
.................
var mySwiper=new Swiper（“.Swiper container”{
模式：“垂直”，
循环：对，
循环附加幻灯片：5张，
中心幻灯片：对，
幻灯片视图：2，
初始幻灯片：0，
});
$（'button#update slides'）。在（'click'，function（）上{
var swiperWrapper=$（'.swiper wrapper'），
newSlides=$（“#幻灯片回购”）.children（“.swiper幻灯片”）.clone（true）；
mysweer.destroy（）；
swiperWrapper.empty（）.append（newSlides）；
$（'.swiper wrapper'）.attr（'style'，''）；
mysweer.reInit（）；
});

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

---

有什么建议吗？

我相信这是因为您正在调用

mysweer.destroy（）

，因此无法运行

reInit（）

。文档中说reInit用于在添加或删除幻灯片时重置。但在这里，您在一个不再是swiper的元素上调用reInit

相反，您可以每次重新创建swiper。（我不知道为什么仅仅调用

removeAllSlides

然后

reInit

不保持相同的设置。）

---

Fiddle:

这可能是正确的，但您会在您的Fiddle中看到重新初始化的swiper在循环模式下不起作用。我怀疑这个解决方案可能涉及到destroy（）调用，但我很难看到这对于一个高度动态的滑块，destroy-ing和reining是如何工作的。有趣。你说得对，我没有注意到设置没有进行。你可以在销毁它之后重新创建它，使用相同的设置：我会更新我的答案。哦，看起来是这样！嗯，我一定是在什么地方想得太多了……不过好极了，谢谢！

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

});

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

});