Изображения не будут загружаться в Flickity, пока я не изменю размер браузера

Я работаю над проектом, и по какой-то причине мои изображения в слайдах Flickity загружаются только тогда, когда размер браузера немного изменяется. Вот мой сайт: /

В Flickity для изменения размера установлено значение true, поэтому я не уверен, в чем здесь проблема. Любая помощь будет принята с благодарностью.

Благодарю вас!

Редактировать: проблема решена!


html jquery css flickity
person veein    schedule 26.01.2018    source источник
comment
Вы нашли решение? Я сообщил о проблеме здесь: github.com/metafizzy/flickity/issues/1077   -  person Mark Boulder    schedule 21.06.2020

Ответы (4)


arrow_upward
2
arrow_downward

Потому что вам нужно добавить imagesLoaded в ваши параметры flickity и включить загруженную библиотеку изображений.

https://flickity.metafizzy.co/options.html#imagesloaded

person kenny    schedule 27.01.2018
comment
Это неверно (github.com/metafizzy/flickity/issues/1077). - person Mark Boulder; 21.06.2020

arrow_upward
3
arrow_downward

Если кто-то еще столкнется с этим, а imagesLoaded не имеет значения для вас, это было мое решение:

Если вы загружаете этот ползунок внутри модального окна, которое при нажатии кнопки модальное изменяется с display:none на display: block -- это также приведет к ошибке, связанной с необходимостью изменения размера экрана, чтобы заставить карусель работать.

Чтобы исправить это, используйте opacity: 0 вместо display:none в скрытом модальном окне. Когда кнопка нажата, измените модальность на непрозрачность: 1.

person Kelly Warpechowski    schedule 06.10.2020

arrow_upward
1
arrow_downward

Возможно, непрозрачность не будет идеальной для вас. Используйте этот способ, если хотите:

.hide{
    transform: translateY(-1000em);
    position: absolute;
}

.show{
    transform: none;
    position: relative;
}

переключить этот класс с помощью JQuery или JS...

person Jay Parmar    schedule 02.04.2021

arrow_upward
0
arrow_downward

Чтобы также добавить к ответу Келли. Если у вас есть модальность и изменение прозрачности невозможно (т.е. в моем случае я использую одну и ту же модель как для отображения галереи, так и для мобильной навигации, переключая отображение каждой функции). Вы также можете уничтожить переменную flickity и повторно инициализировать. Например, в моем обработчике событий у меня есть:

if (/* condition for closing */) {
  event.preventDefault();
  lightbox.classList.remove('visible');
  flckty.destroy()
  lightboxCar.style.display = "none";
}

else if (/* condition for opening carousel */) {
  lightboxCar.style.display = "initial";
  var pageImgs = document.querySelector("main").getElementsByTagName("img");
  flckty = new Flickity( '#lightbox-carousel', {
    // options
    "cellAlign": 'center',
    });

где lightboxCar — элемент карусели на странице.

person falcoso    schedule 20.11.2020