javascript - 一页上有多个 bxslider。可以结合js吗？

Question

是否可以结合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。

Answer 1

$(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)
        });
    }
});