OWL carousel with image preview in pagonation items

OWL carousel: https://github.com/OwlFonk/OwlCarousel for issue 130: https://github.com/OwlFonk/OwlCarousel/issues/130

HTML

<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<div id="cd-main-content">
  <div id="sequence-1">
    <div id="viewport" class="owl-carousel b-Chumbo" >

    <div class="b-Azul transition" id="sequence-1">
    <video><source src="http://flowagency.nu/video/sc.mp4" type="video/mp4"></video>
          <div class="slide_info" >
          <div class="info_center fade-in one">
          <h2>swiss clinic Enhancing Beauty</h2>
          <h3>Web, print & media</h3>
          <a href="#portfolio" data-href="portfolio/get.php?p=sc" class="btn slider_button hvr-sweep-to-right">View case study<span class="time-line"></span></a>
          </div>
      </div>
    </div>

    <div class="b-Verde transition" id="sequence-1" >
        <div class="slide_info"> 
          <div class="info_center">
          <h2>ComeOn Concept</h2>
          <h3>Web and icon design</h3>
          <a href="#portfolio" data-href="portfolio/get.php?p=comeon" class="btn slider_button hvr-sweep-to-right">View case study<span class="time-line"></span></a>
          </div>
      </div>
    </div>
    <div class="b-Amarelo transition" id="sequence-1">
        <div class="slide_info" >
          <div class="info_center">
          <h2 >LHI</h2>
          <h3>Webdesign, Web-development, Branding, Retouching</h3>
          <a href="#portfolio" data-href="portfolio/get.php?p=lhi" class="btn slider_button hvr-sweep-to-right">View case study<span class="time-line"></span></a>
          </div>
      </div>
    </div>
</div>
</div>
</div>

CSS

#viewport {
    top: 0!important;
}
.owl-next {
    right: 0!important;
}
.owl-prev {
    left: 0!important;
}

.slide_info {
  text-align: center;
  font-size: 100px;
  position: relative;
  top: 50%;
    -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
      -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #696969;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
      -webkit-transition: all 300ms cubic-bezier(0.82, 0, 0.19, 1);
    -moz-transition: all 300ms cubic-bezier(0.82, 0, 0.19, 1);
    -o-transition: all 300ms cubic-bezier(0.82, 0, 0.19, 1);
    -ms-transition: all 300ms cubic-bezier(0.82, 0, 0.19, 1);
    transition: all 300ms cubic-bezier(0.82, 0, 0.19, 1);
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Sweep To Top */
.slider_button{
  position: static;
  font-weight: 700;
  font-size: 18px;
  padding: 14px 40px;
  text-transform: uppercase;
  color: #fff;
  font-family: "refrigerator-deluxe";
  text-decoration: none;
  border-bottom: 2px solid #100f0e;
        -webkit-transition: all...

JavaScript

$(document).ready(function() {
      $(".owl-carousel").owlCarousel({
        navigation : true,
        pagination : true,
        paginationSpeed : 1000,
        singleItem: true,
        transitionStyle: "mask",
        autoHeight: true,
        autoPlay: 3000, //Set AutoPlay to 3 seconds
        navigationText : false,
        afterAction : syncPosition,
     //   afterAction: function(current) {
     //   current.find('video').get(0).play();
   // }


      });
          function syncPosition(el){
    var current = this.currentItem;      
    // code for smooth transition
    this.owl.owlItems.removeClass('turn-on');


    $(this.owl.owlItems[this.owl.currentItem]).addClass('turn-on');

    
    
  }




    });



    $(window).scroll(function(){
      if ($(this).scrollTop() > 80) {
          $('.owl-pagination').addClass('hidden');
      } else {
          $('.owl-pagination').removeClass('hidden');
      }
});


$('.slider_button').on('mouseover', function (e){
    carousel.trigger('stopOnHover');
});

$('.slider_button').on('mouseleave', function (e){
    carousel.trigger('autoPlay');
});