貓頭鷹旋轉木馬自動播放方向

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'; 
    } 
}