alysonsm alysonsm - 3 months ago 49
jQuery Question

Owl carousel autoplay direction

I am using owl carousel and I believe there are some bugs in "autoplay" parameter. According to the sample below, you will see that the animation is going to the opposite side. But when we resize the window it goes to the right direction. And the dots are working oddly because of that as well.

Anyone can help me to fix that?

Here is the sample working:
https://jsfiddle.net/alysonsm/17xf4Lvw/1/

Here is the code:



$('.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

The way that I fix was working with the event, 'translated.owl.carousel' and triggers like 'next.owl.carousel' and 'prev.owl.carousel'. So I implemented the workaround bellow:

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