是否可以在一个页面上组合我所拥有的4 Bxsliders的JS?请参阅下面的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。
答案 0 :(得分:0)
$(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)
});
}
});