Bootstrap carousel with Javascript function to play and pause

Question

I have a problem in carousel class in bootstrap. I have defined a button which is by default a pause button, then i use a javascript function on that button to control the carousel like when clicked, the icon should change to play and the carousel should stop the cycle, but .click(function) is not working when the button is clicked instead it is pausing the carousel when i position the mouse on the button. please help me solve this problem.

     $(document).ready(function(){
            $("#mycarousel").carousel( { interval: 2000 } );
            $("#carouselButton").click(function()
            {
                if ($("#carouselButton").children("span").hasClass('fa-pause'))
                {
                    $("#mycarousel").carousel("pause");
                    $("#carouselButton").children("span").removeClass('fa-pause');
                    $("#carouselButton").children("span").addClass('fa-play');
                }
                else if ($("#carouselButton").children("span").hasClass('fa-play'))
                {
                    $("#mycarousel").carousel("cycle");
                    $("#carouselButton").children("span").removeClass('fa-play');
                    $("#carouselButton").children("span").addClass('fa-pause');                    
                }
            });
        });

Answer 1

Nice question. I couldn't get { pause:null } to work as you wanted either. But digging this more, I got a working solution...

• the key is toggling data-interval attribute on the carousel div
• but this doesn't get the loop started, to trigger the start... we either have to hover-on and hover-off manually... or automate it (which we did)
• but since there is some lag for adding/removing this attribute by jQuery, we (hackish-ly) add a setTimeout to take care of this

Working snippet below:

$(document).ready(function() {

  $('#playPause').click(function() {
    if ($("#myCarousel").attr("data-interval")) {
      $("#myCarousel").removeAttr("data-interval");
      $(".carousel-item>.active").removeAttr("active");
      setTimeout(function() {
        $(".carousel-control-next").trigger('click');
        $(".carousel-inner").trigger('mouseenter');
        $("#myCarousel").trigger('mouseenter');
      }, 500);
    } else {
      $("#myCarousel").attr("data-interval", "500");
      setTimeout(function() {
        $(".carousel-control-next").trigger('click');
        $(".carousel-inner").trigger('mouseenter');
        $("#myCarousel").trigger('mouseenter');
        $("#myCarousel").trigger('mouseleave');
      }, 1000);
    }
  });

  // Enable Carousel Indicators
  $(".item1").click(function() {
    $("#myCarousel").carousel(0);
  });
  $(".item2").click(function() {
    $("#myCarousel").carousel(1);
  });
  $(".item3").click(function() {
    $("#myCarousel").carousel(2);
  });

  // Enable Carousel Controls
  $(".carousel-control-prev").click(function() {
    $("#myCarousel").carousel("prev");
  });
  $(".carousel-control-next").click(function() {
    $("#myCarousel").carousel("next");
  });
});

/* Make the image fully responsive */

.carousel-inner img {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container mt-3">
  <button type='button' id='playPause'>Play / Pause</button>

  <!-- The carousel -->
  <div id="myCarousel" class="carousel slide mt-4">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
    </ul>

    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#myCarousel">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>

Answer 2

I believe you left uncommented div with the same id:

<div class="btn-group" id="carouselButton">

then your button with the same id just doesn't work:

<button class="btn btn-danger btn-sm" id="carouselButton">

I had the same problem. The code comes from Coursera, Front-End Web UI Frameworks and Tools: Bootstrap 4 Week 4, Exercise (Instructions): More Bootstrap and JQuery

Answer 3

Answer below works well and in JavaScript for a different taste

function buttonFlip() {   
  var parentButton = document.getElementById("carouselButton");
  var childSpan = document.getElementById("carouselButton_span");
  if (parentButton.contains(childSpan) && childSpan.classList.contains("fa-pause")) {
      $("#mycarousel").carousel('pause');
      childSpan.classList.remove("fa-pause");
      childSpan.classList.add("fa-play");
  }
  else {
      $("#mycarousel").carousel('cycle');
      childSpan.classList.remove("fa-play");
      childSpan.classList.add("fa-pause");
  }
}

Answer 4

If this is the bootstrap course lesson 4, from coursera, I had the same issue.

Go to this part and change the ID in my case I put carousel-style as id. Then go to the stylesheet and change the #carouselButton to the id you named in the btn-group.

It should work after that.

P.S The teacher doesnt explain to you but also you need to change the play icon to "fas fa play" as a class

it should look like this.

div class="btn-group" id="carousel-style">
   <button class="btn btn-light btn-sm" id="carouselButton">
        <span class="fa fa-pause"></span>
    </button>
 </div>

The Javascript should look like this:

<script>
$(document).ready(function() {
    $('#mycarousel').carousel({ interval: 2000 });
    $("#carouselButton").click(function(){
            if ($("#carouselButton").children("span").hasClass('fa fa-pause')) {
                $("#mycarousel").carousel('pause');
                $("#carouselButton").children("span").removeClass('fa fa-pause');
                $("#carouselButton").children("span").addClass('fas fa-play');
            }
            else if ($("#carouselButton").children("span").hasClass('fas fa-play')){
                $("#mycarousel").carousel('cycle');
                $("#carouselButton").children("span").removeClass('fas fa-play');
                $("#carouselButton").children("span").addClass('fa fa-pause');                    
            }
        });
}); </script>