Поэтому и хотел использовать jquery
но анимацию получается сделать только для первого слайда, а далее перестает работать(
.animate({'background-position-x': '-60px'}, 10000, 'linear');
<!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;
}
/* 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",
anim
});
var anim = $('.owl-item.active .item').animate({
'background-position-x': '-60px'
}, 10000, 'linear');
});
</script>
</body>
</html>
