猫头鹰旋转木马幻灯片过渡

时间:2017-09-24 20:48:21

标签: jquery slide owl-carousel

我创建了猫头鹰旋转木马滑块,并且需要在幻灯片之间进行过渡,不要注意,慢慢地连续移动。?!有example(幻灯片位于页面底部)

如果这不能做猫头鹰旋转木马滑动滑块可以像这张幻灯片一样进行过渡。

1 个答案:

答案 0 :(得分:0)

我最接近的是最小化autoplayTimeout和smartSpeed之间的差异。 Jsfiddle example

$(document).ready(function() {
  $(".owl-carousel").owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 1520,
    smartSpeed: 1500,
    animateIn: 'linear',
    animateOut: 'linear'
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>


<div class="owl-carousel">
  <div> Your Content 1 </div>
  <div> Your Content 2</div>
  <div> Your Content 3</div>
  <div> Your Content 4</div>
  <div> Your Content 5</div>
  <div> Your Content 6</div>
  <div> Your Content 7</div>
</div>