如何使用（每个）最小化代码行

Question

刷一个人

var swiperCurrent;

var swiper = new Swiper('.swiper-container-1', {
    init: false,
    pagination: '.swiper-pagination-1',
    nextButton: '.swiper-button-next-1',
    prevButton: '.swiper-button-prev-1',
    slidesPerView: 3,
    centeredSlides: true,
    paginationClickable: true,
    initialSlide: 2,
    spaceBetween: 22,
    breakpoints: {
        992: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
    runCallbacksOnInit:true
});

function showSliderContent2(idx) {
    $('._ooredoo_banner_content_1> div').hide(0);
    $('._ooredoo_banner_content_1> div:eq('+ idx +')').fadeIn(200)
}

swiper.on('init', function (el) {
    showSliderContent(el.activeIndex);
});

swiper.on('transitionEnd', function (el) {
    if(swiperCurrent !== el.activeIndex){
        showSliderContent(el.activeIndex);
        swiperCurrent = el.activeIndex;
    }
});

swiper.init();

轻扫两个

var swiperCurrent2;

var swiper = new Swiper('.swiper-container-2, {
    init: false,
    pagination: '.swiper-pagination-2',
    nextButton: '.swiper-button-next-2',
    prevButton: '.swiper-button-prev-2',
    slidesPerView: 3,
    centeredSlides: true,
    paginationClickable: true,
    initialSlide: 2,
    spaceBetween: 22,
    breakpoints: {
        992: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
    runCallbacksOnInit:true
});

function showSliderContent2(idx) {
    $('._ooredoo_banner_content_2> div').hide(0);
    $('._ooredoo_banner_content_2> div:eq('+ idx +')').fadeIn(200)
}

swiper.on('init', function (el) {
    showSliderContent2(el.activeIndex);
});

swiper.on('transitionEnd', function (el) {
    if(swiperCurrent2 !== el.activeIndex){
        showSliderContent2(el.activeIndex);
        swiperCurrent2 = el.activeIndex;
    }
});

swiper.init();

第三刷

var swiperCurrent3;

var swiper = new Swiper('.swiper-container-3’, {
    init: false,
    pagination: '.swiper-pagination-3',
    nextButton: '.swiper-button-next-3',
    prevButton: '.swiper-button-prev-3',
    slidesPerView: 3,
    centeredSlides: true,
    paginationClickable: true,
    initialSlide: 2,
    spaceBetween: 22,
    breakpoints: {
        992: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
    runCallbacksOnInit:true
});

function showSliderContent3(idx) {
    $('._ooredoo_banner_content_3> div').hide(0);
    $('._ooredoo_banner_content_3> div:eq('+ idx +')').fadeIn(200)
}

swiper.on('init', function (el) {
    showSliderContent3(el.activeIndex);
});

swiper.on('transitionEnd', function (el) {
    if(swiperCurrent3 !== el.activeIndex){
        showSliderContent3(el.activeIndex);
        swiperCurrent3 = el.activeIndex;
    }
});

swiper.init();

Answer 1

类似以下（未经测试）的代码可能会有所帮助：我所做的就是将通用代码分解为可重用的函数，并使用模板字符串填充缺少的部分，然后在map上使用该函数{1}}，1和2部分ID。这意味着我们不再需要在某些变量上使用3和2后缀。它们仅在3的回调所生成的闭包中可用。

其中可能存在一些错误，要么重复使用我不应该使用的东西，要么反过来：使不必要的东西变得动态。在第一种情况下，如果可以继续使用map来区分它，那就太好了。如果不是这样，您可能需要一个或多个其他变量，并且id语句将变得更加复杂。

map