Уничтожить/перезагрузить bxSlider между вызовами AJAX?

У меня есть стартовая страница с bxSlider (макетом во всю ширину) и оболочкой вокруг этого элемента.

Однако, когда я нажимаю, чтобы перейти на другую страницу через ajax, у меня есть действие javascript, которое перезагружает содержимое оболочки ползунка, поскольку я меняю "1 макет полной ширины ползунка" на "2 ползунки с половинной шириной"

Таким образом, всего имеется 3 ползунка, но если вы загружаете стартовую страницу напрямую, вы видите только 1. Если вы загружаете другую страницу напрямую (без ajax), вы видите 2 других ползунка.

Я инициализирую ползунки следующим образом:

banner1 = $('#page_banner1').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 540,
    responsive: true,
    speed: 700,
    pause: 7500,
    auto: true
});

banner2 = $('#page_banner2').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 540,
    responsive: true,
    speed: 700,
    pause: 9500,
    auto: true
});

banner_full = $('#page_banner_full').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 1080,
    responsive: true,
    speed: 700,
    pause: 7500,
    auto: true
});

Так, например, на одной из страниц (не стартовой), тогда banner1 и banner2 являются bxSliders, но banner_full возвращает NULL:

<div id="banner_wrapper" class="page_block">

    <div id="page_banner1" class="page_slider" style="display: none;">
        <div id="banner1_0">
            <img id="img_0" src="cats.png" border="0">
        </div>
        <div id="banner1_1">
            <img id="img_1" src="dogs.png" border="0">
        </div>
        <div id="banner1_2">
            <img id="img_2" src="fish.png" border="0">
        </div>
    </div>

    <div id="page_banner2" class="page_slider" style="display: none;">
        <div id="banner2_0">
            <img id="img_0" src="banana.png" border="0">
        </div>
        <div id="banner2_1">
            <img id="img_1" src="orange.png" border="0">
        </div>
        <div id="banner2_2">
            <img id="img_2" src="apple.png" border="0">
        </div>
    </div>

</div>

Я предполагаю, что мне нужно разветвить мой код инициализации на функции? Но не уверен, как лучше всего подойти к воссозданию этого в функцию, которую я могу легко вызвать (где я бы проверил, если ползунок typeof !== 'undefined', затем перезагрузите/уничтожите, иначе запустите код инициализации).

Я знаю, что bxSlider поддерживает загрузку динамического содержимого... за исключением того, что я фактически меняю полное содержимое $('#banner_wrapper').html(data);, так как я использую разные параметры для ползунков (ширина так далее.).

Вот HTML-код полного слайдера:

<div id="banner_wrapper" class="page_block">

    <div id="page_banner_full" class="page_slider" style="display: none;">
        <div id="banner_full_0">
            <img id="img_0" src="football.png" border="0">
        </div>
        <div id="banner_full_1">
            <img id="img_1" src="rugby.png" border="0">
        </div>
        <div id="banner_full_2">
            <img id="img_2" src="basketball.png" border="0">
        </div>
    </div>

</div>

РЕДАКТИРОВАТЬ:

Хорошо, вот что я сделал, чтобы разветвить код инициализации bxSlider в функцию:

global_product.prototype.slider = function(elem, type, pause_time) {
    var slider_elem = $(elem);

    if(typeof(slider_elem) === 'undefined') {
        return false;
    }

    slider_elem.show();

    if(typeof(slider_elem.getSlideCount) !== 'function') {
        if(type === 'large') {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 1080,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        } else {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 540,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        }

        return slider_elem;
    } else {
        slider_elem.destroySlider();
    }

    return false;
};

global_product.prototype.sliderDestroy = function(elem) {
    var destroy_elem = $(elem);

    if(typeof(destroy_elem) === 'undefined') {
        return false;
    }

    if(typeof(destroy_elem.destroySlider) === 'function') {
        destroy_elem.destroySlider();
    }
};

global_product.prototype.reloadSlider = function(elem) {
    var reload_elem = $(elem);

    if(typeof(reload_elem) === 'undefined') {
        return false;
    }

    if(typeof(reload_elem.reloadSlider) === 'function') {
        reload_elem.reloadSlider();
    }
};

Который работает с:

global_product.prototype.slider_ajax = function(page) {

    banner1 = this.sliderDestroy('#page_banner1');
    banner2 = this.sliderDestroy('#page_banner2');
    banner_full = this.sliderDestroy('#page_banner_full');

    $.ajax({
        async: true,
        type: 'GET',
        url: page,
        success: $.proxy(function(data)
        {
            $('#partners').html(data);

            banner_banner1 = this.slider('#page_banner1', '', 7500);
            banner_banner2 = this.slider('#page_banner2', '', 9500);
            banner_full = this.slider('#page_banner_full', 'large', 7500);


        }, this)
    });

    this.reloadSlider('#page_banner1');
    this.reloadSlider('#page_banner2');
    this.reloadSlider('#page_banner_full');
};

Но я не смог уничтожить ползунок «сразу»? Кажется, он ждет, пока bxSlider закончит сначала, прежде чем уничтожить его и загрузить другой?

Я предполагаю, что мне следует использовать «это» вместо «продукт» внутри функций прототипа, но я не думаю, что это настоящая причина, по которой все работает неправильно? -> хм, похоже, это не работает - «это» не определено

Есть идеи? прямо сейчас слайдер на начальной странице работает, затем я нажимаю и загружаю другую страницу, и DOM показывает два слайдера, которые, похоже, были инициализированы как bxSliders, но они не запустились и не отображаются как видимые?

Аааа, так что мне пришлось исправить мои вызовы 'product' var на 'this' внутри прототипа. Код обновлен и теперь работает хорошо...