Owl 轮播自动播放方向

Question

我正在使用 owl 轮播，我相信 "autoplay" 参数中存在一些错误。根据下面的示例，您会看到动画正在向另一侧移动。但是当我们调整 window 的大小时，它会朝着正确的方向发展。因此，这些点的工作也很奇怪。

谁能帮我解决这个问题？

这是工作示例： 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';
  }
}

Owl 轮播自动播放方向

Owl carousel autoplay direction

jquery

owl-carousel-2