Сообщение от рони
|
|
alexscus,
|
Спасибо за пример!
нужно было мне сразу на примере показать
после добавления следующего правила, стало норм:
.owl-item.owl-fade-out .item{ background-position: -50px 0}
если его убрать, происходит "дергание" при переходе слайдов
минус в том, что для адаптивной верстки придется дописывать новую позицию фона "background-position"
но пока вышло как-то так)
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - CSS3 Transitions</title>
<!-- Owl Carousel Assets -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet">
</head>
<body>
<div id="owl-demo" class="owl-carousel">
<div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage1.jpg)"></div>
<div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage4.jpg)"></div>
<div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage3.jpg)"></div>
<div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage5.jpg)"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo{
width: 500px;
height: 200px;
border: 1px solid #333;
}
.owl-carousel, .sl-carousel {position: relative; height: 100%; z-index: 10;}
.owl-carousel div:not(.owl-controls),
.sl-carousel div:not(.owl-controls)
{height: 100%; z-index: 10;}
.owl-item .item{
-moz-background-size: 120%;
-webkit-background-size: 120%;
-o-background-size: 120%;
background-size: 120%;
background-repeat: no-repeat;
}
.owl-item.active .item{
animation: animatedBackground 60s linear infinite;
-moz-animation: animatedBackground 60s linear infinite;
-webkit-animation: animatedBackground 60s linear infinite;
-o-animation: animatedBackground 60s linear infinite;
}
/*hack*/
.owl-item.owl-fade-out .item{
background-position: -50px 0
}
/* animatedBackground */
@keyframes animatedBackground {
0 { background-position: 0 0 }
100% { background-position: -600px 0 }
}
@-moz-keyframes animatedBackground {
0 { background-position: 0 0 }
100% { background-position: -600px 0 }
}
@-webkit-keyframes animatedBackground {
0 { background-position: 0 0 }
100% { background-position: -600px 0 }
}
@-o-keyframes animatedBackground {
0 { background-position: 0 0 }
100% { background-position: -600px 0 }
}
/* fade */
.owl-fade-out {
z-index: 10;
-webkit-animation: fadeOut .7s both ease;
-moz-animation: fadeOut .7s both ease;
animation: fadeOut .7s both ease;
}
.owl-fade-in {
-webkit-animation: fadeIn .7s both ease;
-moz-animation: fadeIn .7s both ease;
animation: fadeIn .7s both ease;
}
@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
</style>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
autoPlay: true ,
navigation : false,
singleItem : true,
pagination: false,
addClassActive: true,
transitionStyle : "fade"
});
});
</script>
</body>
</html>