jquery - 猫头鹰轮播自动播放方向

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