スライド間のフェード遷移は、owlcarouselで遅くなる必要があります

Question

私はowlcarousel2を使用しています。スライド間のフェード遷移はまだ速すぎます。 1つの画像が次の画像に変わるときは、より遅くする必要があります。 （私はどれくらいの長さのスライドが表示されているのか、ちょうど移行速度であると言及していません）。このオプションがある場所

autoplaySpeed: 13000, 
autoplayTimeout:5000 

Answer 1

2000より速く再生する必要があります（逆も同様です）。自動再生速度を13000から20000に上げますが、現時点では5000になりますので、おそらくそれを増やしてください8000 - 8secs）

私fiddle here（それは違うのですが、それはだフクロウカルーセルを参照してください）

$(document).ready(function() { 
 
    $("#owl-demo").owlCarousel({ 
 
     autoPlay:2000, //Set AutoPlay to 2 seconds 
 
     dots: true, 
 
     items: 2, 
 
     itemsDesktop: [100, 3], 
 
     itemsDesktopSmall: [200, 3] 
 
    }); 
 
});

#owl-demo .item { 
 
    margin: 3px; 
 
} 
 
#owl-demo .item img { 
 
    display: block; 
 
    width: 25%; 
 
    height: auto; 
 
} 
 
.owl-theme .owl-controls .owl-page { 
 
    display: inline-block; 
 
} 
 
.owl-theme .owl-controls .owl-page span { 
 
    background: none repeat scroll 0 0 #869791; 
 
    border-radius: 20px; 
 
    display: block; 
 
    height: 12px; 
 
    margin: 5px 7px; 
 
    opacity: 0.5; 
 
    width: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css" rel="stylesheet" /> 
 

 

 
<div id="owl-demo"> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/50x50" alt="Owl Image" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/50x50" alt="Owl Image" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/50x50" alt="Owl Image" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/50x50" alt="Owl Image" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/50x50" alt="Owl Image" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/50x50" alt="Owl Image" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/50x50" alt="Owl Image" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/50x50" alt="Owl Image" /> 
 
    </div> 
 
</div>

（スニペットは何とか動作しませんが、あなたが見つけたならフィドルの作品は、スニペットを修正エラー、thx）