alexscus,
<!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-test-out .item {
-webkit-animation: testOut 7s both ease;
-moz-animation: testOut 7s both ease;
-o-animation: testOut 7s both ease;
animation: testOut 7s both ease;
}
.owl-test-in .item {
-webkit-animation: testIn 7s both ease;
-moz-animation: testIn 7s both ease;
-o-animation: testIn 7s both ease;
animation: testIn 7s both ease;
}
@keyframes testOut {
0% { background-position: 100% 0; }
100% { background-position: 300% 0; }
}
@keyframes testIn {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
.item {
width: 500px;
height: 300px ;
background-size: 1000px 300px;
background-repeat: no-repeat;
background-position: 100% 0;
}
</style>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
autoPlay: true ,
navigation : false,
singleItem : true,
pagination: false,
transitionStyle : "test"
});
});
</script>
</body>
</html>