Как правильно разместить несколько слайдеров (swiper) на одной странице?

Question

[kamelot43]

Приветствую ) Стоит задача организовать множество слайдеров на мобильной версии сайта (25 штук) , при работе необходимо работать с различными методами . В связи с этим возникает вопрос : как правильно организовать код , если необходимо работать с методами у множества слайдеров (swiper) ? сейчас представленный код хоть и рабочий , но выглядит слишком раздутым и нерациональным . Как можно оптимизировать работу ?) Заранее спасибо. Буду благодарен за помощь.

var catalogSlider1 = null;
var catalogSlider2 = null;

var mediaQuerySize = 575;

/*slide-1r*/
function catalogSliderInit1 () {
  if (!catalogSlider1) {
    catalogSlider1 = new Swiper('.swiper1', {
      slidesPerView: 'auto',
      spaceBetween: 10,
      freeMode: true,
      speed: 230,

      scrollbar: {
        el: '.swiper-scrollbar',
        dragSize: '66px',
        hide: true,
      },
    });
  }


function catalogSliderDestroy1 () {
  if (catalogSlider1) {
    catalogSlider1.destroy(true, true);
    catalogSlider1 = null;
  }
}

/*slider-2*/
function catalogSliderInit2 () {
  if (!catalogSlider2) {
    catalogSlider2 = new Swiper('.swiper2', {
      slidesPerView: 'auto',
      spaceBetween: 10,
      freeMode: true,
      speed: 230,

      scrollbar: {
        el: '.swiper-scrollbar',
        dragSize: '66px',
        hide: true,
      },
    });
  }

function catalogSliderDestroy2 () {
  if (catalogSlider2) {
    catalogSlider2.destroy(true, true);
    catalogSlider2 = null;
  }
}

$(window).on('load resize', function () {
  // Берём текущую ширину экрана
  var windowWidth = $(this).innerWidth();
  
  // Если ширина экрана меньше или равна mediaQuerySize(1024)
  if (windowWidth <= mediaQuerySize) {
    // Инициализировать слайдер если он ещё не был инициализирован
    catalogSliderInit1();
    catalogSliderInit2();
  } else {
    // Уничтожить слайдер если он был инициализирован
    catalogSliderDestroy1();
    catalogSliderDestroy2();
  }
});

Answer 1

[Александр Черемхин]

const mediaQuerySize = 575;
let sliders= [];
const options = {
      slidesPerView: 'auto',
      spaceBetween: 10,
      freeMode: true,
      speed: 230,

      scrollbar: {
        el: '.swiper-scrollbar',
        dragSize: '66px',
        hide: true,
      },
    });
(window).on('load resize', function () {
  // Берём текущую ширину экрана
  var windowWidth = $(this).innerWidth();
  
  // Если ширина экрана меньше или равна mediaQuerySize(1024)
  if (windowWidth <= mediaQuerySize) {
    // Инициализировать слайдер если он ещё не был инициализирован
   sliders= [
          new Swiper('.swiper1', options),
          new Swiper('.swiper2', options),
          ...
          new Swiper('.swiperN', options),
   ];
  } else {
    // Уничтожить слайдер если он был инициализирован
    sliders.forEach(slider=>slider.destroy(true, true));
    sliders=[];
  }
});