CODEWITHSUNDEEP
jquerywordpresstwitter-bootstrap
Priya jain
Priya jain

Reputation: 703

Jquery carousel slider cycle only on hover and stop on mouse leave?

I would like to have the Bootstrap Carousel only cycle on:hover and pause once the mouse leaves. I'm using default Bootstrap code base. There will be multiple carousels on the page with this functionality.i used http://getbootstrap.com/2.3.2/javascript.html#carousel this link.

I tried this code It does not work on hover.

<script>
    $('#slider-fixed-products').carousel({interval: false});
    var myInterval = false;
    $('.slider-testimonial').mouseover(function() {
        var ctrl = $(this);
        var interval = 2000;
        myInterval = setInterval(function() {
            ctrl.trigger("click");
        }, interval);
    });
    $('.slider-testimonial').mouseout(function() {
        clearInterval(myInterval);
        myInterval = false;
    });
</script>

Upvotes: 0

Views: 1883

Answers (1)

James Hibbard
James Hibbard

Reputation: 17755

Here's how you can have the carousel slide when you hover over either of the controls (left/right arrows).

$('#myCarousel').carousel({
    interval: false
});
var i;
$('.carousel-control')
        .on("mouseover", function() {
            var control = $(this),
                    interval = 500;
            i = setInterval(function() {
                control.trigger("click");
            }, interval);
        })
        .on("mouseout", function() {
            clearInterval(i);
        });

fiddle

This will work for multiple carousels on the same page.

Upvotes: 2

Related Questions