CODEWITHSUNDEEP
javascriptjqueryowl-carousel
Josh
Josh

Reputation: 3475

Pause Carousel on hover of separate elements (Owl Beta 2)

I've created a separate navigation which sits completely outside of the carousel but I'm having a few issues with the autoplay.

Here is the markup:

<div class="carousel">
    <div class="">
        <img src="assets/img/carousel1.jpg" />
    </div>
    <div class="">
        <img src="assets/img/carousel2.jpg" />
    </div>
    <div class="">
        <img src="assets/img/carousel3.jpg" />
    </div>
    <div class="">
        <img src="assets/img/carousel4.jpg" />
    </div>
</div>

<div class="carousel_selector">
    <a href="" data-to="0">0</a>
</div>
<div class="carousel__selector">
    <a href="" data-t="1">1</a>
</div>
<div class="carousel_selector">
    <a href="" data-to="2">3</a>
</div>
<div class="carousel_selector">
    <a href="" data-to="3">4</a>
</div>

and here is the Javascript:

var carousel = $(".carousel");

carousel.owlCarousel({
    autoplay: true,
    autoplayHoverPause: true,
    autoplayTimeout: 500,
    items: 1,
    loop: true
});

$('.carousel_selector a').on('mouseover', function (e){
    carousel.trigger('stop.owl.autoplay');
});

$('.carousel_selector a').on('mouseleave', function (e){
    carousel.trigger('play.owl.autoplay');
});

$('.carousel_selector a').on('click', function (e){
    e.preventDefault();
    var slideTo = $(this).data('to');
    carousel.trigger('to.owl.carousel', [slideTo]);
    carousel.trigger('stop.owl.autoplay');
});

The .on('mouseover', ... and .on('mouseleave', ... are called as expected, but the carousel only pauses sometimes. I can't see any pattern to when it pauses.

The .on('click', ... works absolutely fine, except when the autoplay is paused, it resumes immediately. I've tried adding a call to stop the autoplay immediately after the navigation but it hasn't made a difference.

My questions are:

1) How can I consistently pause the carousel when the mouse is over certain elements?

2) Can the carousel autoplay remain paused (provided the mouse is over certain elements) even after triggering to.owl.carousel?

Upvotes: 2

Views: 10516

Answers (1)

witrin
witrin

Reputation: 3763

I'm pretty sure your problem is that you haven't used the latest develop of the Owl Carousel 2.0 beta. Thus you facing some old bugs; a running demo of your current work would be helpful.

Checkout this demo and you'll see it works like expected: http://jsbin.com/novakalicovo/1/edit. Using the button Run with JS several times might be necessary because sometimes the resources from rawgit.com are not loaded immediately.

Regard to your second question, this works as long as you stay with the mouse pointer over a link otherwise your handler mouseleave retriggers the auto play.

Upvotes: 1

Related Questions