2017-09-24 19 views
1

私はOwl Carousel Sliderを作成しました。スライド間の遷移を気付かずに、ゆっくりと連続的に移動します。 example(スライドがページの一番下にあります)Owlカルーセルスライドの遷移

これができない場合、Owl Carousel Slideスライダはこのスライドのようなトランジションを実行できます。

+2

ポストここにコードのすべて! – mlegg

+0

https://jsfiddle.net/43g1c395/ – Geo1313

答えて

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>

+0

しかし、スライドが3つ目のアイテムをロールして、タイムアウトが小さければ、私はそれが停止したいとは思わなかった – Geo1313