bxSlider уничтожить и инициализировать на основе изменения размера области просмотра

Question

Я использую приведенный ниже скрипт на странице, которая содержит несколько слайдеров, созданных с помощью bxSlider. Мне нужно, чтобы элементы ползунков были сложены на маленьких экранах (что является начальным состоянием) и стали частью ползунка на больших экранах.

function accordionSliderToggle() {
  // get slider containers
  var sliders = $('.js-desktop-slider-holder');
  // check viewport size
  var desktop = checkWindowWidth();
  var initSliders, destroySliders, totalSliders = [];

  initSliders = function() {
    $(sliders).each(function(i) {
      // Slider target elements
      var targetSlider = $(this).find('.js-accordion-slider');
      var targetPager = $(this).find('.js-accordion-slider-nav');
      var targetSlideTitle = $(this).find('.slide-title');

      // Initialize slider
      var sliderObj = $(targetSlider).bxSlider({
        adaptiveHeight: true,
        infiniteLoop: false,
      });
      // push sliders to array
      totalSliders.push(sliderObj);
    });
  };

  destroySliders = function() {
    for (var i = 0; i < totalSliders.length; i++) {
      totalSliders[i].destroySliders();
    }
  };

  if (desktop) {

    initSliders();

  } else {

    destroySliders();

  }
}

accordionSliderToggle();

$(window).on('resize', function(){
  if (!window.requestAnimationFrame) {
    setTimeout(accordionSliderToggle, 300);
  } else {
    window.requestAnimationFrame(accordionSliderToggle);
  }
});

У bxSlider есть метод destroySlider() однако, когда я изменяю размер окна с малого на большое, ползунки инициализируются, но если я изменяю размер с большого на маленькое, они не разрушаются.