重新加载滑块时向前移动或向后移动都不起作用

Question

我正在使用bxSlider和我以下的cenario

当选择特定年份时，我需要重新加载月份，只包含点击年份中具有值的月份。

我的问题是，当重新加载时，我松开了箭头控件，即我无法向前或向后移动。

self.UpdateMensalTab = function (year, tab) {
    var url2 = _URL_UPDATE_TAB_MENSAL_;
    $(".slider2").html("");
    $.ajax({
        url: url2,
        type: 'POST',
        async: true,
        dataType: 'html',
        data: { "Year": year },
        success: function(result) {
            $(".slider2").html(result);
        }
    });

    $('.slider2').bxSlider({
        pager: false,
        infiniteLoop: false,
        slideWidth: 100,
        minSlides: 6,
        maxSlides: 6,
        slideMargin: 1,
        autoControls: true,
        adaptiveHeight: true,
        startSlide: 1
    });
}

图片

即使有数据显示，向前或向后移动的按钮也不再起作用。任何人都可以帮助我吗？

Answer 1

bxSlider有一个名为reloadSlider的函数。 你可以使用像

var slider = $('.bxslider').bxSlider({
    mode: 'horizontal'
});

$('#reload-slider').click(function(e){
    e.preventDefault();
    slider.reloadSlider({
        mode: 'fade',
        auto: true,
        pause: 1000,
        speed: 500
    });
});

有关详细信息，请参阅this

此外，您应该在添加新内容后刷新滑块。

self.UpdateMensalTab = function (year, tab) {
    var url2 = _URL_UPDATE_TAB_MENSAL_;

    $(".slider2").html("");

    window.slider = $('.slider2').bxSlider({
        pager: false,
        infiniteLoop: false,
        slideWidth: 100,
        minSlides: 6,
        maxSlides: 6,
        slideMargin: 1,
        autoControls: true,
        adaptiveHeight: true,
        startSlide: 1
    });

    $.ajax({
        url: url2,
        type: 'POST',
        async: true,
        dataType: 'html',
        data: { "Year": year },
        success: function(result) {
            $(".slider2").html(result);
            window.slider.reloadSlider({
                pager: false,
                infiniteLoop: false,
                slideWidth: 100,
                minSlides: 6,
                maxSlides: 6,
                slideMargin: 1,
                autoControls: true,
                adaptiveHeight: true,
                startSlide: 1
            });
        }
    });
}