是否可以结合4个JS Bxsliders我在一页上有什么?请参阅下面的 JS。
$(document).ready(function(){
$('.bxslider2').bxSlider({
slideWidth: 645,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 0,
responsive: false,
controls: true,
onSliderLoad: function () {
$('.bxslider2 > li:not(.bx-clone)').eq(1).addClass('active-slide');
},
onSlideBefore: function ($slideElement, oldIndex, newIndex) {
$('.bxslider2 li').removeClass('active-slide');
$($slideElement).next().addClass('active-slide');
}
});
});
我不擅长 JS,但我确信有一种方法可以组合该 JS,所以它只需要输入一次(而不是使用不同的类 .bxslider2、.bxslider3 等复制 > 粘贴 4 次。)需要确保每个轮播上的第一张幻灯片具有该类 .active-slide。
最佳答案
$(document).ready(function(){
function makeOnSliderLoad(index) {
return function() {
$('.bxslider' + String(index) + ' > li:not(.bx-clone)').eq(1).addClass('active-slide');
}
}
function makeOnSlideBefore(index) {
return function($slideElement, oldIndex, newIndex) {
$('.bxslider' + String(index) + ' li').removeClass('active-slide');
$($slideElement).next().addClass('active-slide');
}
}
for(var sliderIndex = 1; sliderIndex < 5; sliderIndex++) {
$('.bxslider' + String(sliderIndex)).bxSlider({
slideWidth: 645,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 0,
responsive: false,
controls: true,
onSliderLoad: makeOnSliderLoad(sliderIndex),
onSlideBefore: makeOnSlideBefore(sliderIndex)
});
}
});
关于javascript - 一页上有多个 bxslider。可以结合js吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31373088/