Форум

giwuf · #1 (**permalink**) 20.08.2018, 13:27

Всем добрый день!
Есть 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>

рони · #2 (**permalink**) 20.08.2018, 13:56

giwuf,
сначала загрузка фото, потом выравнивание, затем установка owlCarousel.

рони · #3 (**permalink**) 20.08.2018, 14:25

Сообщение от giwuf

Есть owl карусель для которой предусмотрено выравнивание элементов по высоте.

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

giwuf · #4 (**permalink**) 20.08.2018, 15:52

Рони, я вас правильно понимаю, что вы имеете ввиду так?

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 .photo__img').each(function(){
    setEqualHeight($(this).parents(".owl-item"));
  });

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

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

"зачем? почему у вас блоки разной высоты?"
Предусмотреть, чтобы размеры картинок могли отличаться в пару пикселей по ширине или высоте при динамической подгрузке и при этом все отображалось ровненько без зазоров и кривостей

рони · #5 (**permalink**) 20.08.2018, 15:54

giwuf,
а так ?

.photo img{
    height: 190px;
    width: auto;
   }

рони · #6 (**permalink**) 20.08.2018, 16:39

giwuf,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
<style type="text/css">
.yellow,
.green {
  width: 100%;
  height: 50px;
}

.yellow {
  background-color: yellow;
  margin-bottom: -20px;
}

.green {
  margin-top: -20px;
  background-color: green;
}
.carousel .owl-stage-outer {
  padding: 20px 0;
}
.owl-item{
   transition: .5s all;
}

.owl-item:hover {
  transform: scale(1.2);
  z-index: 10;
}


.photo img {
    width: auto;
}
@media (min-width: 0px){
.photo img{
    height: 100px;
}}
@media (min-width: 480px){
.photo img{
    height: 120px;
}}
@media (min-width: 768px){
.photo img{
    height: 150px;
}}
@media (min-width: 992px){
.photo img{
    height: 170px;

}}
@media (min-width: 1200px){
.photo img{
    height: 190px;

}}
</style>
<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>
<script>
jQuery(window).on("load", function() {
    $("#photo-gallery").owlCarousel({
        loop: true,
        nav: false,
        dots: false,
        responsive: {
            0: {
                items: 2
            },
            480: {
                items: 3
            },
            768: {
                items: 4
            },
            992: {
                items: 5
            }
        }
    })
});
</script>
</head>
<body>

<div class="yellow"></div>
<section id="photo-gallery" class="carousel owl-carousel">
  <div>
    <a class="photo"><img src="https://picsum.photos/300/190/?random&r=1" alt="photo-1"></a>
  </div>
  <div>
    <a class="photo"><img src="https://picsum.photos/304/184/?random&r=2" alt="photo-2"></a>
  </div>
  <div>
    <a class="photo"><img src="https://picsum.photos/305/189/?random&r=3" alt="photo-3"></a>
  </div>
  <div>
    <a class="photo"><img src="https://picsum.photos/304/189/?random&r=4" alt="photo-4"></a>
  </div>
  <div>
    <a class="photo"><img src="https://picsum.photos/305/190/?random&r=5" alt="photo-5"></a>
  </div>
</section>
<div class="green"></div>

</body>

</html>

giwuf · #7 (**permalink**) 20.08.2018, 23:34

Сообщение от рони

giwuf,
а так ?

.photo img{
    height: 190px;
    width: auto;
   }

Да, так тоже, оказывается, можно. Круто, рони, спасибо большое за ответ! Только в дополнение у меня к вам 2 вопросика еще:
1 - интересно, что на итоговом сайте мне понадобилось дописать плюс ко всему правила

Код:

	#photo-gallery.owl-carousel .owl-item {
		z-index: 0;
	}
	#photo-gallery.owl-carousel .owl-item:hover {
		z-index: 10;	
	}

не знаю почему, но без них, увеличенная при ховере картинка выстраивалась каскадом относительно других, т.е. на левую картинку налазила, а справа пряталась под
2 - маленькие белые зазорчики по бокам картинки слева и справа возникают из-за правила

Код:

transform: translateZ(0);

?
От них нельзя избавиться никак? вот картинки одного размера таких контуров не образовывают

рони · #8 (**permalink**) 21.08.2018, 00:43

Сообщение от giwuf

Только в дополнение у меня к вам 2 вопросика еще:

здесь есть хорошие специалисты по css, может они вам подскажут.

giwuf,
посмотрите пример выше снова, убрал лишнее в css, может так лучше будет.

Malleys · #9 (**permalink**) 21.08.2018, 04:36

Одна деталь, которую, возможно не заметили... Если указать строго фиксированную высоту картинки, то искажаются пропорции картинки. (Овальные колёса машины)

Вместо такой кучи правил @media, можно было указать приблизительно height: 20vw;, но и это не нужно, поскольку (Овальные колёса машины)

Объявление transform: translateZ(0); бессмысленно в данном контексте, объект сдвинутый на 0 пикселей остаётся на своём месте ( и ещё поскольку по умолчанию transform-style: flat;)

<!DOCTYPE HTML>
<html>
<head>
	<meta name="viewport" content="width=device-width">
	<style type="text/css">

.carousel:after, .carousel:before {
	content: "";
	display: block;
	height: 50px;
	background: #f1fff1;
}
		
.carousel:after {
	background: #fffff1;
}

.carousel .owl-stage-outer {
	padding: 30px 0;
	margin: -30px 0;
}
		
.carousel .owl-stage {
	display: flex;
	background: black;
}

.carousel .owl-item {
	transition: .15s;
	z-index: 0;
	flex: 1 0 auto;
}

.carousel .owl-item:hover {
	transition: .5s;
	transform: scale(1.25);
	z-index: 10;
}

.carousel .photo {
	display: block;
	overflow: hidden;
	height: 100%;
}
		
.carousel .photo img {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

	</style>
	<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>
	<script>
jQuery(window).on("load", function() {
    $("#photo-gallery").owlCarousel({
        loop: true,
        nav: false,
        dots: false,
        responsive: {
              0: { items: 2 },
            480: { items: 3 },
            768: { items: 4 },
            992: { items: 5 }
        }
    })
});
	</script>
</head>
<body>
	<section id="photo-gallery" class="carousel owl-carousel">
		<a class="photo"><img src="https://picsum.photos/300/190/?random&r=1" alt="photo-1"></a>
		<a class="photo"><img src="https://picsum.photos/304/184/?random&r=2" alt="photo-2"></a>
		<a class="photo"><img src="https://picsum.photos/305/189/?random&r=3" alt="photo-3"></a>
		<a class="photo"><img src="https://picsum.photos/304/189/?random&r=4" alt="photo-4"></a>
		<a class="photo"><img src="https://picsum.photos/305/190/?random&r=5" alt="photo-5"></a>
	</section>
</body>
</html>

рони · #10 (**permalink**) 21.08.2018, 06:52

Malleys,
спасибо за помощь!!!

Форум

Справочник

Discord чат

Курсы javascript