猫头鹰轮播幻灯片过渡

问题描述 投票:0回答:2

我创建了猫头鹰旋转木马滑块,需要做到幻灯片之间的过渡不被注意,缓慢而连续地移动。?!有示例(幻灯片位于页面底部)

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

jquery slide owl-carousel
2个回答
2
投票

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

$(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>


0
投票

只需将计时器设置为-1,就像这样 owl.trigger('to.owl.carousel', [clickedIndex, -1, true]);

© www.soinside.com 2019 - 2024. All rights reserved.