I have a Bootstrap 5 Carousel, which is set to automatically cycle. While it is cycling, I want a click on the Previous or Next buttons to pause the cycling. So far, my code is not working.

The carousel has a Previous button (button.carousel-control-prev) and a Next button (button.carousel-control-next). It also has a Pause button (button.carousel-pause) and a Play button (button.carousel-play) which use custom javascript to work. The pause and play buttons are working as expected.

The Previous and Next buttons work normally, but do not stop the cycling.

Note that the carousel is set up not to pause when the user hovers over the carousel; we do not want hovering to pause the carousel.

What I want is for a click on the Previous or Next button to advance the slideshow by one slide in the appropriate direction, and then to pause it until the visitor clicks the Play button.

In other words, once the visitor takes manual control of the sideshow, it should no longer cycle automatically unless they deliberately click the play button.

I want to assume that, if they clicked the Previous button for example, they want to take a closer look at the previous slide, and do not want it to then jump to the next slide again. I believe that's how the carousel should work.

For extra credit, I'd like this to also apply to a click on any one of the indicator buttons (button.carousel-indicator).

Here is what I have so far:

Existing code for the controls:

jQuery(document).ready(function($) {
  $("[id^='carousel-']").each(function() {
    var $carouselEl = $(this);
    var carousel = new bootstrap.Carousel($carouselEl[0], {
      pause: false
    });

    // Update slide count dynamically
    var $currentSlide = $carouselEl.find("#current-slide");
    var totalSlides = $carouselEl.find("#total-slides").text();

    $carouselEl.on("slid.bs.carousel", function(event) {
      $currentSlide.text(event.to + 1);
    });

    // Pause and play buttons
    var $pauseBtn = $carouselEl.find(".carousel-pause");
    var $playBtn = $carouselEl.find(".carousel-play");

    if ($pauseBtn.length && $playBtn.length) {
      $pauseBtn.on("click", function() {
        carousel.pause();
      });

      $playBtn.on("click", function() {
        carousel.cycle();
      });
    }

    // previous and next buttons
    var $prevBtn = $carouselEl.find(".carousel-control-prev");
    var $nextBtn = $carouselEl.find(".carousel-control-next");

    $prevBtn.on("click", function() {
      carousel.pause();
    });
    $nextBtn.on("click", function() {
      carousel.pause();
    });
  });
});

<script src=".7.1/jquery.min.js"></script>
<div role="group" aria-label="Slide controls" class="slideshow-controls">
  <div class="slide-count d-inline-block">Slide <span id="current-slide" aria-label="Current slide number">1</span> of <span id="total-slides" aria-label="Total slides count"><?php echo count($gallery_ids); ?></span></div>
  <button class="carousel-control-prev btn btn-theme" type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" data-bs-slide="prev" tabindex="0">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
  <button class="carousel-control-next btn btn-theme" type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" data-bs-slide="next" tabindex="0">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
  <button class="carousel-pause btn btn-theme" type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" tabindex="0">Pause</button>
  <button class="carousel-play btn btn-theme" type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" tabindex="0">Play</button>
  <div class="carousel-indicators">
    <?php foreach ($gallery_ids as $index => $image_id) : ?>
    <button type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" data-bs-slide-to="<?php echo $index; ?>" class="carousel-indicator <?php echo $index === 0 ? 'active' : ''; ?>" aria-label="Slide <?php echo $index + 1; ?>" tabindex="0"></button>
    <?php endforeach; ?>
  </div>
</div>

I have a Bootstrap 5 Carousel, which is set to automatically cycle. While it is cycling, I want a click on the Previous or Next buttons to pause the cycling. So far, my code is not working.

The carousel has a Previous button (button.carousel-control-prev) and a Next button (button.carousel-control-next). It also has a Pause button (button.carousel-pause) and a Play button (button.carousel-play) which use custom javascript to work. The pause and play buttons are working as expected.

The Previous and Next buttons work normally, but do not stop the cycling.

Note that the carousel is set up not to pause when the user hovers over the carousel; we do not want hovering to pause the carousel.

What I want is for a click on the Previous or Next button to advance the slideshow by one slide in the appropriate direction, and then to pause it until the visitor clicks the Play button.

In other words, once the visitor takes manual control of the sideshow, it should no longer cycle automatically unless they deliberately click the play button.

I want to assume that, if they clicked the Previous button for example, they want to take a closer look at the previous slide, and do not want it to then jump to the next slide again. I believe that's how the carousel should work.

For extra credit, I'd like this to also apply to a click on any one of the indicator buttons (button.carousel-indicator).

Here is what I have so far:

Existing code for the controls:

jQuery(document).ready(function($) {
  $("[id^='carousel-']").each(function() {
    var $carouselEl = $(this);
    var carousel = new bootstrap.Carousel($carouselEl[0], {
      pause: false
    });

    // Update slide count dynamically
    var $currentSlide = $carouselEl.find("#current-slide");
    var totalSlides = $carouselEl.find("#total-slides").text();

    $carouselEl.on("slid.bs.carousel", function(event) {
      $currentSlide.text(event.to + 1);
    });

    // Pause and play buttons
    var $pauseBtn = $carouselEl.find(".carousel-pause");
    var $playBtn = $carouselEl.find(".carousel-play");

    if ($pauseBtn.length && $playBtn.length) {
      $pauseBtn.on("click", function() {
        carousel.pause();
      });

      $playBtn.on("click", function() {
        carousel.cycle();
      });
    }

    // previous and next buttons
    var $prevBtn = $carouselEl.find(".carousel-control-prev");
    var $nextBtn = $carouselEl.find(".carousel-control-next");

    $prevBtn.on("click", function() {
      carousel.pause();
    });
    $nextBtn.on("click", function() {
      carousel.pause();
    });
  });
});

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div role="group" aria-label="Slide controls" class="slideshow-controls">
  <div class="slide-count d-inline-block">Slide <span id="current-slide" aria-label="Current slide number">1</span> of <span id="total-slides" aria-label="Total slides count"><?php echo count($gallery_ids); ?></span></div>
  <button class="carousel-control-prev btn btn-theme" type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" data-bs-slide="prev" tabindex="0">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
  <button class="carousel-control-next btn btn-theme" type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" data-bs-slide="next" tabindex="0">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
  <button class="carousel-pause btn btn-theme" type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" tabindex="0">Pause</button>
  <button class="carousel-play btn btn-theme" type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" tabindex="0">Play</button>
  <div class="carousel-indicators">
    <?php foreach ($gallery_ids as $index => $image_id) : ?>
    <button type="button" data-bs-target="#carousel-<?php echo esc_attr($atts['id']); ?>" data-bs-slide-to="<?php echo $index; ?>" class="carousel-indicator <?php echo $index === 0 ? 'active' : ''; ?>" aria-label="Slide <?php echo $index + 1; ?>" tabindex="0"></button>
    <?php endforeach; ?>
  </div>
</div>

• twitter-bootstrap
• bootstrap-5
• carousel

Share Improve this question Follow edited Mar 12 at 23:25 zer00ne 44.5k66 gold badges4848 silver badges8080 bronze badges asked Mar 6 at 19:00 hommealonehommealone 4388 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Pause the automatic cycle you can read the official documentation here...

Bootstrap 5.0, 5.1, 5.2, 5.3
https://getbootstrap/docs/5.0/components/carousel/#disable-touch-swiping

https://getbootstrap/docs/5.1/components/carousel/#disable-touch-swiping

https://getbootstrap/docs/5.2/components/carousel/#disable-touch-swiping

https://getbootstrap/docs/5.3/components/carousel/#disable-touch-swiping

In all the versions of bootstrap 5+ you need to disable touch swiping by adding data-bs-touch="false" attribute but in some version additionally you need to add data-bs-interval="false" attribute as well.

Here is what I ended up with, which is working.

First, I had to make sure that my custom javascript file loaded after bootstrap javascript, and I did that by listing bootstrap as a dependency for the script; that helped.

Now, when anyone interacts with the carousel, they are given manual control and cycling stops, until they intentionally click our "Play" button.

I did not need to disable swiping. In fact, I have set up the slideshow to pause when it is swiped as well, but the script for that is more complicated than what I'm showing here. Let me know if anyone needs that too.

jQuery(document).ready(function ($) {
    $("[id^='carousel-']").each(function () {
        var $carouselEl = $(this);
        var carousel = new bootstrap.Carousel($carouselEl[0], {
            ride: "carousel",
            pause:  false,
            touch:  true
        });
        let speed = $carouselEl.data('bs-interval');
        
        function pauseSlideshow() {
            carousel.pause();
            $carouselEl.data('bs-interval',0);
        }
        
        // previous and next buttons
        var $prevBtn = $carouselEl.find(".carousel-control-prev");
        var $nextBtn = $carouselEl.find(".carousel-control-next");
        
        // pause cyling on Prev and Next
        $prevBtn.on("click", function() {
            $carouselEl.carousel('prev');
            pauseSlideshow();
        });
        $nextBtn.on("click", function() {
            $carouselEl.carousel('next');
            pauseSlideshow();
        });
        
        // pause on interaction with indicator buttons
        $('.carousel-indicator').on("click", function() {
            // give the indicators time to work natively, then pause
            setTimeout(pauseSlideshow,1000);
        });
        
        // etc.
    });
});