How to pause Bootstrap carousel on input focus

Question

I have a Bootstrap carousel which contains a simple form. You can set the carousel to pause when hovered upon. However if the cursor leaves the Carousel area while typing within inputs, the carousel reverts back to its default cycle and interval of 5000ms.

I am looking to set it to remain paused during input focus and restart cycle on input focusout.

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
    <div id="slide1" class="item">
        This is a test slide.
    </div>
    <div id="slide2" class="item" >
        <input type="text" placeholder="name" name="full_name" />
    </div>
</div>

<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

</div>

<script>

!function ($) {
    $(function(){
        $('#myCarousel.slide').carousel({
            interval: 5000,
            pause: "hover"
        })
    })
}(window.jQuery)

$('input').focus(function(){
    $("#myCarousel").pause()
}) /* Will worry about restarting carousel on mouseout if I could get this pause working */


</script>

It appears that once a carousel has been initially called (and an interval set) you cannot alter that interval or carousel behaviour.

Any insights would be great.

Solution

You'll need to call the pause function like this: $("#myCarousel").carousel('pause');. This is how all methods are called on bootstrap components, following the jQuery UI convention.

You can restart the carousel by listening to the blur event then calling the cycle method. You'll also need to move your event handlers inside the $(function() {...}); wrapper. This ensures all the DOM elements are present and ready to be manipulated.

So your pausing/cycling code would look like:

$(function(){
    $('#myCarousel.slide').carousel({
        interval: 5000,
        pause: "hover"
    });

    $('input').focus(function(){
       $("#myCarousel").carousel('pause');
    }).blur(function() {
       $("#myCarousel").carousel('cycle');
    });
});

Working Demo

Comments

[dazziola]

Your demo seems to work great, but integrated with my code it seems to not work. Would the fact that I initialize the carousel, on ready at the bottom of the file be a conflict with these calls which appear mid way through the file? Appreciate the quick help though

[dazziola]

I've tried this before and it didn't work for me. You could well be very right but maybe the location of our initializing call for the carousel is conflicting with the input specific carousel calls. Does Bootstrap only allow for one carousel call per ID?

[cfs]

Sorry, I forgot to mention that all your jQuery code should be inside your ` $(function(){})` wrapper. This ensures all the dom elements are present and ready to be manipulated.

[Asenar]

Welcome in SO zumi :) . I think the answer to the full problem has been answered by cfs . And I think your code is not answering exactly to the question : for example, after page loading, I think the carousel will not be running

[Joel Balmer]

Aaah I was hoping some of their documentation would handle that (I'd imagine it's a common issue), getbootstrap.com/javascript/#carousel, but this is simple and does the job perfectly. Thanks!