Показать сообщение отдельно
  #1 (permalink)  
Старый 20.08.2018, 13:27
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 165

Owl carousel загружается через раз - почему?
Всем добрый день!
Есть owl карусель для которой предусмотрено выравнивание элементов по высоте.
Подскажите, пожалуйста, почему порой, если заходить через инкогнито в браузере, сама карусель с контентом порой не загружается и как это можно исправить?

Если обновить страничку, то загрузится и вообще раз на раз не приходится.

function setEqualHeight(columns) {
  var tallestcolumn = 0;
  columns.each(function() {
    currentHeight = $(this).height();
    if (currentHeight > tallestcolumn) {
      tallestcolumn = currentHeight;
    }
  });
  columns.height(tallestcolumn);
}
(function($) {
  "use strict"; // Start of use strict

$('#photo-gallery').owlCarousel({
  loop: true,
  nav: false,
  dots: false,
  responsive: {
    0: {
      items: 2
    },
    480: {
      items: 3
    },
    768: {
      items: 4
    },
    992: {
      items: 5
    }
  }
});

window.onload = setEqualHeight($("#photo-gallery .owl-item"));

})(jQuery); // End of use strict

<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
<div class="yellow"></div>
<section id="photo-gallery" class="carousel owl-carousel">
  <div>
    <a class="photo"><img src="http://placehold.it/300x190&text=1" alt="photo-1"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/304x189&text=2" alt="photo-2"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/305x189&text=3" alt="photo-3"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/304x189&text=4" alt="photo-4"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/305x190&text=5" alt="photo-5"></a>
  </div>
</section>
<div class="green"></div>
Ответить с цитированием