根据此处提供的说明作为答案...
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/