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()但是当我将窗口从小到大调整大小时，滑块会被初始化，但是如果我从大到小调整大小，它们就不会被破坏。