gpt4 book ai didi

jquery - iDangerous Swiper,后续的 destroy() 和 reInit() 方法

转载 作者:行者123 更新时间:2023-12-03 23:02:28 28 4
gpt4 key购买 nike

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

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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com