Карусель изображений не отображается правильно в разных браузерах - PullRequest
Новая
       7

Карусель изображений не отображается правильно в разных браузерах

0 голосов
/ 09 февраля 2020

Здесь я использую Flickity (из плагинов Metafizzy), и с каруселью происходит что-то странное. Это полная ширина карусели. Я ничего не редактировал в обязательных файлах js и css карусели. Я не использую css framework, только jquery, font-awesome и лайтбокс.

Если я пытаюсь увидеть страницу на Firefox через localhost (как я всегда делаю), Я вижу это (высота изображения должна быть 350 пикселей). Затем я просто нажимаю F12, чтобы открыть инспектор, и карусель показывает правильно. Если я обновлю sh страницу, используя F5, та же проблема с отображением. Но если я просто нажму на имя lo go, чтобы загрузить индекс. php, карусель по-прежнему будет отображаться правильно.

Если я измените размер окна, карусель будет отображаться правильно.

Та же проблема в google Chrome.

Я также проверил на Microsoft Edge, и карусель всегда отображается правильно.

Вот HTML для карусели 

    <div class="row" id="carousel">
        <div class="container">
            <div class="main-carousel">
              <div class="carousel-cell"><a href="img/couture/001.jpg" data-lightbox="image-1"><img src="img/couture/001.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/002.jpg" data-lightbox="image-2"><img src="img/couture/002.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/003.jpg" data-lightbox="image-3"><img src="img/couture/003.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/004.jpg" data-lightbox="image-4"><img src="img/couture/004.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/005.jpg" data-lightbox="image-5"><img src="img/couture/005.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/006.jpg" data-lightbox="image-6"><img src="img/couture/006.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/007.jpg" data-lightbox="image-7"><img src="img/couture/007.jpg" alt=""></a></div>
            </div>
        </div>
    </div>

И сценарий, который идет с ним 

$('.main-carousel').flickity({
  cellAlign: 'left',
  contain: true,
  freeScroll: true,
  pageDots: false,
  wrapAround: true,
  autoPlay: 2500
});

CSS

#carousel{
    margin-top: 115px;
}

.main-carousel img{
    max-height: 350px;
}

@media screen and (max-width: 768px){
    #carousel{
        margin-top: 223px;
    }
}

Спасибо за помощь

Ответы [ 2 ]

0 голосов
/ 09 февраля 2020

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

$(window).on('load', function() {
    $('.main-carousel').flickity({
      cellAlign: 'left',
      contain: true,
      freeScroll: true,
      pageDots: false,
      wrapAround: true,
      autoPlay: 2500
    });
});
0 голосов
/ 09 февраля 2020

Попробуйте добавить к вашему .main-carousel img строки: 

-moz-max-height: 350px;
-moz-min-height: 350px;
...