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 that you have read and understand our privacy policy and code of conduct.

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