Ленивая загрузка нескольких слайдеров с помощью verlock/vanilla-lazyload

Question

В проекте есть несколько слайдеров с разными настройками, следуя документации на библиотеку, но проблема в том, что в документации описывается пример для нескольких слайдеров с одинаковыми настройками. Мой подход:

const gallerySlider = {
  slidesPerView: 1,
  slidesPerColumnFill: 'row',
  spaceBetween: 50,
  observer: true,
  observeParents: true,
  observeSlideChildren: true,
  grid: {
    fill: 'row',
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
    clickable: 'true',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    421: {
      grid: {
        rows: 2,
      },
      slidesPerView: 2,
      spaceBetween: 34,
      slidesPerGroup: 2,
    },
    1200: {
      grid: {
        rows: 2,
      },
      slidesPerGroup: 2,
      spaceBetween: 34,
    },
    1600: {
      grid: {
        rows: 2,
      },
      slidesPerView: 3,
      slidesPerGroup: 3,
      spaceBetween: 50,
    },
  },
  a11y: {
    prevSlideMessage: 'Предыдущий',
    nextSlideMessage: 'Следующий',
  },
  on: {
    // LazyLoad swiper images after swiper initialization
    afterInit: (swiper) => {
      new LazyLoad({
        container: swiper.el,
        cancel_on_exit: false
      });
    }
  }
};

затем инициализирую библиотеку:

new LazyLoad({
  elements_selector: ".swiper-lazy",
  unobserve_entered: true,
  callback_enter: function (swiperElement) {
    new Swiper("#" + swiperElement.id, gallerySlider); 
// gallerySlider - константа, содержащая настройки слайдера
  }
});

Сначала пробовал перечислить константы через запятую, тогда одни и те же настройки применялись сразу ко всем слайдерам, затем пробовал инициализировать новый экземпляр библиотеки для каждого слайдера, но такой подход тоже оказался неэффективным, применились настройки для первого слайдера ко всем:

new LazyLoad({
  elements_selector: ".swiper-lazy",
  unobserve_entered: true,
  callback_enter: function (swiperElement) {
    new Swiper("#" + swiperElement.id, gallerySlider);
  }
});

new LazyLoad({
  elements_selector: ".swiper-lazy",
  unobserve_entered: true,
  callback_enter: function (swiperElement) {
    new Swiper("#" + swiperElement.id, projectsSlider);
  }
});

new LazyLoad({
  elements_selector: ".swiper-lazy",
  unobserve_entered: true,
  callback_enter: function (swiperElement) {
    new Swiper("#" + swiperElement.id, eventsSlider);
  }
});

Может быть у кого-нибудь есть опыт использования этой библиотеки и настройки ленивой загрузки слайдеров

БЛОГ НА HUSL

Ленивая загрузка нескольких слайдеров с помощью verlock/vanilla-lazyload

Ответы (0 шт):