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>
|
giwuf,
сначала загрузка фото, потом выравнивание, затем установка owlCarousel. |
Цитата:
|
Рони, я вас правильно понимаю, что вы имеете ввиду так?
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
"зачем? почему у вас блоки разной высоты?" Предусмотреть, чтобы размеры картинок могли отличаться в пару пикселей по ширине или высоте при динамической подгрузке и при этом все отображалось ровненько без зазоров и кривостей |
giwuf,
а так ?
.photo img{
height: 190px;
width: auto;
}
|
OwlCarousel 2 выравнивание по высоте
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>
|
Цитата:
1 - интересно, что на итоговом сайте мне понадобилось дописать плюс ко всему правила Код:
#photo-gallery.owl-carousel .owl-item {2 - маленькие белые зазорчики по бокам картинки слева и справа возникают из-за правила Код:
transform: translateZ(0);От них нельзя избавиться никак? вот картинки одного размера таких контуров не образовывают |
Цитата:
giwuf, посмотрите пример выше снова, убрал лишнее в css, может так лучше будет. |
Одна деталь, которую, возможно не заметили... Если указать строго фиксированную высоту картинки, то искажаются пропорции картинки. (Овальные колёса машины)
Вместо такой кучи правил @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>
|
Malleys,
спасибо за помощь!!! |
Malleys,
подскажи можно ли сделать бесконечный зум, при наведении на фото, пример того что хочется ниже, но края картинки "дрожжат", это главная беда и цикл без повтора. строка 51.
<!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;
}
.carousel .owl-item:hover img{
transition: 5s;
transform: scale(1.25);
}
</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>
|
OwlCarousel zoom
Malleys,
примерный вариант бесконечного зума, хотелось бы как-то плавнее сделать переходы и в хроме особенно видно, как края картинок 'плывут'.
<!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;
}
.carousel .owl-item:hover .photo img{
animation: zoom 7s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
@keyframes zoom{
0%{
transform: scale(1);
}
95%{
transform: scale(2);
}
100%{
transform: scale(10);
}
}
</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>
|
рони,
Дрожание из за scale. сам часто сталкиваюсь. если поменять 1.2 например или другое значение пропадает, но при масштабировании или на ретине может появится опять. в общем универсальный способ избавится был бы кстати. |
Это баг в движке браузера. Оно не должно дрожать или «плыть».
Если добавить /* костыль */ overflow: hidden; border-radius: .01px; то в данном случае дрожание скрывается codepen.io/anon/pen/OoPLrX |
Malleys,
костыль работает, спасибо, небольшой косяк при масштабировании нижней границы картинки. |
Malleys,
спасибо огромное!!! :thanks: |
Цитата:
object-fit: cover;, которое убирает микроотступы, как я понимаю - оно вель не кроссбраузерное для ie и старщих edge - как-нить это можно решить? |
giwuf,
Цитата:
Цитата:
object-fit да и вопросы по css, лучше адресовать Malleys, он более продвинутый специалист по этой теме. |
Цитата:
Нашел нечто подобное на polyfill, но что-то бекграудная картинка даже не перекрывает внутренний img, а если через консоль принудительно картинку удалить, то точно такой же артифакт срабатывает и на бэкграунде. Может быть дело в Код:
transform: scale(1.25); |
Цитата:
проверял в ie11, нет никаких проблем с scale(1.25) Цитата:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
giwuf,
код ниже, у вас в ie работает?
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<style type="text/css">
.carousel:after, .carousel:before {
content: "";
display: block;
height: 50px;
background: #f1fff1;
}
.carousel:after {
background: #fffff1;
}
.carousel .owl-stage-outer {
padding: 32px 0;
margin: -32px 0;
}
.carousel .owl-stage {
display: flex;
}
.carousel .owl-item {
-webkit-transition: .15s;
transition: .15s;
z-index: 0;
flex: 1 0 auto;
overflow: hidden;
border-radius: .01px;
}
.carousel .owl-item:hover {
-webkit-transition: .5s;
transition: .5s;
-webkit-transform: scale(1.23);
transform: scale(1.23);
z-index: 10;
border-radius: 10px;
box-shadow: 4px 4px 7px -1px rgba(173, 173, 173, 1.0);
}
.carousel .photo {
display: block;
overflow: hidden;
height: 100%;
}
.carousel .photo img {
min-width: 100%;
min-height: 100%;
object-fit: cover;
-webkit-transition: 1s;
transition: 1s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
animation: zoom 10s infinite linear;
animation-play-state: paused;
}
.carousel .photo img:hover {
animation-play-state: running;
}
@keyframes zoom {
from, to, 90% {
-webkit-filter: blur(0.1px);
filter: blur(0.1px);
}
90% {
-webkit-transform: scale(2);
transform: scale(2);
}
91% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(5px);
filter: blur(5px);
}
}
</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/1.12.4/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>
|
Цитата:
Стили у меня точно такие же. Другое дело, что наведении на картинку, черный фон из этой инструкции: Код:
.carousel .owl-stage {Цитата:
|
Цитата:
Цитата:
если здесь никакой фон не выскакивает, смотрите, что не так у вас. всё что мог, смотрите выше. и тут Цитата:
|
Цитата:
Все дело в том, что в ie10-11 и ранних edge не работают transition на флексах. Вот пример Цитата:
|
Цитата:
|
Цитата:
посмотрите, пожалуйста, этот пример в каком-нить ie https://jsbin.com/muqiwe/2/edit?html,css,output и сравните с поведением в другом браузере. При наведении на блоки (красный, синий) они плавно друг друга перекрывают с помощью transition, в ie же свойство transition не отрабатывает и переход получается резким. Аналогично и у меня: transition не отрабатывает и до тех пор пока не произойдет (это не мгновенно происходит) Код:
transform: scale(1.25); |
Цитата:
|
рони,
Все же я докопался до решения! Оказывается, дело было в разных версия подключенной библиотеки стилей owl carousel (у вас beta, а у меня 2.4) в которой для item были подключены такие стили:
.owl-carousel .owl-item, .owl-carousel .owl-wrapper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
Прописал отдельным пунктом
.owl-carousel .owl-item, .owl-carousel .owl-wrapper {
-ms-backface-visibility: inherit;
}
и задний фон ушел! Сейчас практически идеально увеличивает картинку для ie10-11, слегка только подергивается в самом конце, но это не существенно - ориентир в первую очередь на основные браузеры.Спасибо за помощь! |
| Часовой пояс GMT +3, время: 23:27. |