フクロウカルーセルの自動再生方向

Question

私はフクロウカルーセルを使用しています。私は、「自動再生」パラメータにいくつかのバグがあると信じています。下のサンプルによれば、アニメーションが反対側に向かっていることがわかります。しかし、ウィンドウのサイズを変更すると、正しい方向に移動します。そしてドットもそのために不思議に働いています。

誰でも問題を解決できますか？コードここ https://jsfiddle.net/alysonsm/17xf4Lvw/1/

されています：

$('.owl-carousel').owlCarousel({ 
 
     loop: true, 
 
     dots: true, 
 
     margin: 25, 
 
     autoplayTimeout: 6000, 
 
     autoplaySpeed: 1000, 
 
     autoplayHoverPause: true, 
 
     autoplay: true, 
 
     responsive: { 
 
     0: { 
 
      items: 2, 
 
      slideBy: 1 
 
     }, 
 
     600: { 
 
      items: 4, 
 
      slideBy: 1 
 
     }, 
 
     1000: { 
 
      items: 6, 
 
      slideBy: 6 
 
     } 
 
     } 
 
});

.owl-dots { 
 
    text-align: center; 
 
    margin-top: 20px; 
 
    margin-bottom: 5px; } 
 

 
.owl-item { 
 
    overflow: hidden; } 
 

 
.owl-dots > .owl-dot { 
 
    background: #656565; 
 
    border-radius: 50%; 
 
    height: 10px; 
 
    width: 10px; 
 
    display: inline-block; 
 
    margin: 4px; } 
 

 
.owl-dots > .active { 
 
    background: #e31b23 !important; }

<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> 
 
<script src="https://raw.githubusercontent.com/OwlCarousel2/OwlCarousel2/develop/dist/owl.carousel.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="owl-carousel owl-theme"> 
 
      <div> 
 
       <img src="http://placehold.it/150x150?text=Slide+1" alt="Testing Slides"> 
 
      </div> 
 
      <div> 
 
       <img src="http://placehold.it/150x150?text=Slide+2" alt="Testing Slides"> 
 
      </div> 
 
      <div> 
 
       <img src="http://placehold.it/150x150?text=Slide+3" alt="Testing Slides"> 
 
      </div> 
 
      <div> 
 
       <img src="http://placehold.it/150x150?text=Slide+4" alt="Testing Slides"> 
 
      </div> 
 
      <div> 
 
       <img src="http://placehold.it/150x150?text=Slide+5" alt="Testing Slides"> 
 
      </div> 
 
      <div> 
 
       <img src="http://placehold.it/150x150?text=Slide+6" alt="Testing Slides"> 
 
      </div> 
 
      <div> 
 
       <img src="http://placehold.it/150x150?text=Slide+7" alt="Testing Slides"> 
 
      </div> 
 
      <div> 
 
       <img src="http://placehold.it/150x150?text=Slide+8" alt="Testing Slides"> 
 
      </div> 
 
     </div>

Answer 1

私はイベントで働いていた解決方法、 「translated.owlここ

は、サンプルの作業です.carousel 'と' next.owl.carousel 'や' prev.owl.carousel 'のようなトリガがあります。だから私は怒鳴る回避策を実装：

https://jsfiddle.net/alysonsm/17xf4Lvw/3/

var $owlCarousel = $('.owl-carousel'); 
$owlCarousel.owlCarousel({ 
    loop: false, 
    dots: true, 
    margin: 25, 
    responsive: { 
    0: { 
     items: 2, 
     slideBy: 2 
    }, 
    600: { 
     items: 4, 
     slideBy: 4 
    }, 
    1000: { 
     items: 6, 
     slideBy: 6 
    } 
    } 
}); 

var sleepTimeOut = 5000; 
var transitionSpeedTime = 1000; 
var direction = 'next'; 
var owlTimer; 

moveToNextSlide(transitionSpeedTime, sleepTimeOut); 

$owlCarousel.on('translated.owl.carousel', function() { 
    moveToNextSlide(transitionSpeedTime, sleepTimeOut); 
}); 

$owlCarousel.on('mouseover', function() { 
    window.clearTimeout(owlTimer); 
}); 

$owlCarousel.on('mouseout', function() { 
    moveToNextSlide(transitionSpeedTime, sleepTimeOut); 
}); 

function moveToNextSlide(autoplayTimeout, autoplaySpeed) { 

    window.clearTimeout(owlTimer); 
    owlTimer = window.setTimeout(function() { 

    setSlideDirection(); 

    $owlCarousel.trigger(direction + '.owl.carousel', [autoplayTimeout]); 
    }, autoplaySpeed); 
} 

function setSlideDirection() { 

    // Change the direction the next slide when in first slide. 
    if ($('.owl-stage > .owl-item').first().is('.active')) { 
    direction = 'next'; 
    } 

    // Change the direction the previous slide when in last slide. 
    if ($('.owl-stage > .owl-item').last().is('.active')) { 
    direction = 'prev'; 
    } 
} 

を