javascripttwitter-bootstraphovercarouselbanana

Bootstrap Carousel transition ON hover only


The idea is a static image, but wait... it's not a static image, it's just a slide show that isn't moving, so you think it is a static image. But then you hover your mouse over it, and it begins moving! I've seen it a few places on the web and quite like it's effect, but can't get bootstrap to mimic it.

All my searches turn up results for people trying to get it to pause on hover (can anybody say documentation...), but nothing on doing the opposite. Anyway, here's the basic code...

HTML ~ A very stripped down slideshow

<div class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/image1.jpg" alt="Image one">
        </div>
        <div class="item ">
            <img src="images/image2.jpg" alt="Image two">
        </div>
    </div>
</div>

And here is the JS

$('.carousel').carousel({
        interval: false, //disable auto scrolling
        pause: false     //prevent pause on hover... we want the opposite
    });

//now I try to change the interval on hover
$('.carousel').hover(function(){
    $(this).carousel({
        interval:1000
    })
});

Solution

  • There are 2 things on which this cycling and pausing depends.

    Originally When mouse enters (mouseenter - pause sliding) When mouse leaves (mouseleave - resume sliding)

    Just change following line of code in your js/bootstrap.js file to allow continuous sliding.

    .on('mouseenter', $.proxy(this.**pause**, this)) 
    

    to

    .on('mouseenter', $.proxy(this.**cycle**, this))
    

    And

    .on('mouseleave', $.proxy(this.**cycle**, this))
    

    to

    .on('mouseleave', $.proxy(this.**pause**, this))