qqq

qqq

by alexscus lomov

HTML

<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<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>

CSS

#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; }
}

JavaScript

$(document).ready(function() {

      var owl = $("#owl-demo");
      owl.owlCarousel({
        autoPlay: true ,
        navigation : false,
        singleItem : true,
        pagination: false,
        addClassActive: true,
        transitionStyle : "fade"
      });

      $('.owl-item.active .item').animate({
          'background-position-x': '-60px'
        }, 10000, 'linear');

      });