0

Использую библиотеку flickity. Позволяет инициализировать слайдера 3 вариантами

  • jquery
  • vanila js
  • прямо в html c помощью атрибута data-flickity

Использовал последний варинт и не знал бед. Однако выяснилась неприятная особенность на текущих версиях гугл хрома - иногда неправильно рассчитывается ширина фотографий в слайдере и слайды наслаивают один на другой. Если изменить размер окна - происходит пересчёт, и всё становится ок.

В библиотеке есть метод reloadCells(), который позволяет принудительно пересчитать размер ячеек. Но чтобы его вызвать, нужно получить инстанс слайдера. А я его не инициализирую - использую атрибут в html.

Значит, нужно делать всё в js. Библиотеку jquery не использую. Поэтому

var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
  // options
  cellAlign: 'left',
  contain: true
});

Но querySelector возвращает только 1 слайдер, а у меня их 2. При этом мне важно каждый слайдер запомнить в переменную и как-то потом обратиться к каждому, чтобы вызвать метод reloadCells()

window.addEventListener('load', function () { flkty0.reloadCells() flkty1.reloadCells() });

Как решить эту задачку? Я хочу найти все .main-carousel, инициализировать. А потом отдельно после загрузки всей страницы вызвать для каждого reloadCells()?

1 ответ 1

0

засунь все классы слайдеров в один массив и перебирая массив пересчитай размер ячеек

1
  • 1
    добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 23 мар 2022 в 12:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.