Add Play/Pause button to bootstrap carousel

Question

I have read almost all the threads regarding to the bootstrap carousel, but haven't found an answer to my question. I have added two control buttons (play/pause) to the carousel, but each button fires the function from the default/first slide. I would like to be able to pause the current slide and play from the current slide whenever the click event happens.

Here is my code:

<script src="/_catalogs/masterpage/UHN/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('.carousel').carousel({ interval:6000 });  

        $('#playButton').click(function () {
            $('#homeCarousel').carousel('cycle');
        });
        $('#pauseButton').click(function () {
            $('#homeCarousel').carousel('pause');
        });
    });

</script>

And the two controls:

<!--Carousel controls -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>

Answer 1

This should be working. I'd make sure that your click events are firing as you expect them to because some elements of the bootstrap carousel can appear above your elements and prevent clicks.

If you add the following controls in HTML:

<div id="carouselButtons">
    <button id="playButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-play"></span>
     </button>
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-pause"></span>
    </button>
</div>

Then the following JavaScript should control starting and stopping on any frame:

$('#playButton').click(function () {
    $('#homeCarousel').carousel('cycle');
});
$('#pauseButton').click(function () {
    $('#homeCarousel').carousel('pause');
});

As related to my first point, to get them to appear properly within the carousel, you can style the button group with the following CSS:

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}

Working Demo in jsFiddle

For this functionality to make the most sense, you probably want the carousel to continue moving, even when hovering over it (otherwise after the play selection is made, the cycling behavior won't start up again until you move the mouse).

According to the carousel docs:

Option - pause
Default - "hover" - Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

Instead, make sure you turn this off when you initialize the carousel like this:

$('#homeCarousel').carousel({
    interval:2000,
    pause: "false"
});

Answer 2

This was my approach. You can style the .pause and .play class however you see fit, but I'm just using plain text for demo purposes:

$('.carousel-control.pause').click(function() {
        var controls = $(this);
        if (controls.hasClass('pause')) {
            controls.text('Resume').removeClass('pause').toggleClass('play');
            $('#myCarousel').carousel('pause');
        } else {
            controls.text('Pause').removeClass('play').toggleClass('pause');
            $('#myCarousel').carousel('cycle');
        }
    });

Here is your detonator

<a class="carousel-control pause" href="javascript:void(0);">Pause</a>

Answer 3

For those who would like the play/pause buttons to switch off. jsFiddle example

Javascript:

 $("button").click(function() {
  if ($(this).attr("id") === "pauseButton") {
    $('#homeCarousel').carousel('pause');
    $(this).attr("id", "playButton");
    $("span", this).toggleClass("glyphicon-play glyphicon-pause");
  } else {
    $('#homeCarousel').carousel('cycle');
    $(this).attr("id", "pauseButton");
    $("span", this).toggleClass("glyphicon-pause glyphicon-play");
  }
});

HTML:

<div id="carouselButtons">
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-pause"></span>
    </button>
  </div>