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.

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.

• javascript
• jquery
• twitter-bootstrap
• carousel

• Just a precursor. This is a stripped down version. I'm not looking for HTML advice (no actual form etc), just some javascript hints relating to Bootstraps Carousel. Thanks – dazziola Commented Aug 9, 2013 at 15:27

3 Answers 3

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

This is how you pause a carousel

$("#myCarousel").carousel('pause');

omg, i think it would be better to init carousel the right way....

on hover dont let them pause and on mouseleave pause object!

see this

    $( ".carousel" ).hover(
            function() {
                $( "#"+this.id ).carousel({
                    interval: 2000,
                    //pause: 'hover' 
                    pause: 'none' // disable default option "pause on hover" and set it to none
                });
            }, function() {
                $( "#"+this.id ).carousel('pause'); // to set it manually on a spezific carousel id 
            }
    );

Greetz zumi