Javascript Swiper slider:如何在多个动态实例上初始化它,但命名为
我想初始化多个Swiper实例 我找到了一个基于jQueryJavascript Swiper slider:如何在多个动态实例上初始化它,但命名为,javascript,jquery,Javascript,Jquery,我想初始化多个Swiper实例 我找到了一个基于jQuery的解决方案。each()如下: 但是使用这段代码我不能使用Swiper的方法,因为我不能编写类似于mySwiper.update()的东西 我的代码如下: $('.results-tab-slider').each(function() { new Swiper($(this), { slidesPerView: 2, spaceBetween: 70, loop: true, breakpoint
的解决方案。each()
如下:
但是使用这段代码我不能使用Swiper的方法,因为我不能编写类似于mySwiper.update()的东西代码>
我的代码如下:
$('.results-tab-slider').each(function() {
new Swiper($(this), {
slidesPerView: 2,
spaceBetween: 70,
loop: true,
breakpoints: {
767: {
slidesPerView: 1
},
1024: {
slidesPerView: 2
},
1270: {
slidesPerView: 1
}
},
navigation: {
prevEl: $(this).siblings('.results-tab-button-prev'),
nextEl: $(this).siblings('.results-tab-button-next'),
}
});
});
正如我所说,我想重写代码,我可以使用这样的实例mysweer.update()代码>
最重要的是,我不知道生成了多少滑块。在DOM中添加您想要的刷子数量。确保他们每个人都有不同的ID
<div id="swiper-a" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div id="swiper-b" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
你解决这个问题了吗?万一你能给我一个答复吗?谢谢
var thisSwiper = [];
$('.swiper-container').each(function(i) {
var this_ID = $(this).attr('id');
thisSwiper[i] = new Swiper('#'+this_ID, {
loop: true,
direction: 'vertical'
});
thisSwiper[i].on('slideChange', function () {
console.log('slide '+i+' changed');
});
});