CODEWITHSUNDEEP
javascriptbootstrap-4
Ahmad
Ahmad

Reputation: 9658

An event for bootstrap carousel on pause

Based on this documentation, I can't find any event to detect the carousel is paused. Is there any way to detect the bootstrap carousel pause?!

The carousel can be paused via different ways and I would like to show a paused icon whenever it's paused.

Upvotes: 0

Views: 400

Answers (1)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

This is not really a direct answer but I do not think there is a pause event as such but you can detect the slide.bs.carousel and slid.bs.carousel events. Here when it has slid one, I do a pause and trigger a custom event pause-detect.

Now what good is this? If you know the events that trigger a pause ('mouseenter' for example) you can then monitor that event and trigger the custom one in that.

Update: added the mouseenter default pause event as an example, commented out on the slid event where that triggered pause.

$('#carouselExampleIndicators').carousel();

$('#carouselExampleIndicators')
  .on('slid.bs.carousel', function(event) {
    // do something…
    let mycar = $(this);
    //   mycar.carousel("pause");
    let currentSlide = $(event.relatedTarget);
    /*  mycar.trigger('pause-detect', [{
        slide: currentSlide
      }]);
    */
  }).on('mouseenter', function(event) {
    let mycar = $(this);
    let currentSlide = mycar.find('.active');
    mycar.trigger('pause-detect', [{
      slide: currentSlide
    }]);
  }).on('pause-detect', function(event, mycarousel) {
    // let mycar = $(this);
    // let elemEvents = $._data(mycar.get(0), "events");
    // console.log(elemEvents);
    console.log("paused:", event.target); // carousel element
    console.log("slide:", mycarousel.slide.get(0), mycarousel.slide.find('img').attr('alt'));
  });
.carousel-item {
  height: 200px;
  border: solid lime 1px;
  background-color: #AADDFF;
  color: blue;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> mytext
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 1

Related Questions