unable to pause bootstrap5 carousel

[millerthegorilla]

Hi, I am trying to pause a bootstrap 5 carousel, so that I can then play it when images have been loaded.
The carousel is created in html, and so far, in the console, I have tried

$('#carousel_id').carousel('pause')
$('#carousel_id').carousel({pause: true})

but neither of these work.

var myCarousel = document.querySelector('#carousel-large-background')
var carousel = new bootstrap.Carousel(myCarousel)
carousel.pause()

when I examine the carousel element after calling the pause method, the private property _isPaused = true, but the carousel doesn't stop.
Ideally, I would like the carousel to not autoplay so that when I have received the webworker loaded images, I can then start the carousel cycling.
Mtia...

[florianlacreuse]

The option pause determines the behavior when a hovering over the carousel. If set to false, hovering over the carousel won't pause it.

If you don't want the carousel to cycle automatically, you need to use the option interval set to false.
I guess you can switch back to a number value when the carousel is ready to cycle (I haven't tried it myself).

https://getbootstrap.com/docs/5.1/components/carousel/#options

[millerthegorilla]

Yh, I have tried that, but with no luck.
I tried the following:

const carouselEl = document.querySelector('#carousel-large-background')
const carousel = new bootstrap.Carousel(carouselEl)
carouselEl.setAttribute('data-bs-interval', false)
carousel._config['interval'] = false

...and the method stated in the bootstrap documentation:

const carousel = new bootstrap.Carousel(carouselEl, {interval: false})

and

bootstrap.Carousel.getInstance(carouselEl)._interval = false
bootstrap.Carousel.getInstance(carouselEl)._element.setAttribute('data-bs-interval', false)

but nothing so far has worked....

[millerthegorilla]

I finally got it working with the following from w3schools info - https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

$("#carousel-large-background").carousel("pause");

not sure why it didn't work previously.

[florianlacreuse]

{interval: false} works just fine: https://codepen.io/florianlacreuse/pen/zYEmWoa

[millerthegorilla]

These work fine in the console, but when I try and run them within the document.ready of an external script, I get no luck at all.
I really hate javascript with a passion. I haven't had to program using it for a good few years now, but I am doing some django frontend stuff and for an async image load to bootstrap carousel, I need to pause the carousel until the webworker has handed back the loaded blob and changed the source to it. Currently I am trying an onload...

$(document).ready(function () {
    $("#carousel-large-background").on("slide.bs.carousel", function(e){
        next_el = $($('.carousel-item img').get(e.to))
        console.log("next_el = " + next_el)
        if (next_el.attr('src') == "")
        {
          var myCarouselEl = document.querySelector('#carousel-large-background')
          var carousel = new bootstrap.Carousel(myCarouselEl, {
            interval: false
          })
          console.log('src is empty.  next slide is : ' + next_el.get()[0])
          next_el.get(0).onload = function(){
            console.log("image has loaded")
            var myCarouselEl = document.querySelector('#carousel-large-background')
            var carousel = new bootstrap.Carousel(myCarouselEl, {
              interval: 5200
            });
            console.log(carousel)
          };
        }
    });
    ... webworker stuff below...

The webworker stuff works fine, but getting the stupid carousel to pause until the next image has loaded is proving to be a pain in the a**. I guess I am probably having problems with event delegation or similar. GAH!

[millerthegorilla]

Apparently pausing the carousel doesn't work inside a slide event handler. It works fine in the slid event handler, but I need to test the availability of an img before the slide works. BOOH carousel designer...

[millerthegorilla]

but $('#carouselid').carousel('pause') doesn't work in the $(document).ready(function ()

but it works in the console...

[millerthegorilla]

However, the following works in the body of the document.ready:

 var myCarouselEl = document.querySelector('#carousel-large-background')
       var carousel = new bootstrap.Carousel(myCarouselEl, { interval: false })

and $('#carousel_id').carousel('pause') works in the slid event (but not the slide event).

[millerthegorilla]

So, I am really pissed off with this. I can't seem to find a way to pause the carousel inside the slid or slide eventlistener. I don't know why it doesn't work.

[millerthegorilla]

    const myCarouselEl = document.querySelector('#carousel-large-background')
    myCarouselEl.addEventListener('slid.bs.carousel', function() {
    var carousel = new bootstrap.Carousel(myCarouselEl, {
         interval: false
     })
})

[millerthegorilla]

doesn't work

[dariemlazaro]

After two days stuck whit this problem i found the solution. This works for me:

 const myCarousel = document.getElementById('myCarousel');

  myCarousel.addEventListener('slide.bs.carousel', event => {
    //some custom code here, any time the carousel changes
  });

  //pause the Carousel
  jQuery("#mybuttonorsomethingelse").on('myevent', function () {
    var carousel = bootstrap.Carousel.getInstance(myCarousel) // Retrieve a Carousel instance
    carousel.to(<someindex>); //Cycles the carousel to a particular frame (0 based, similar to an array)
    carousel.pause(); //pause the carousel
  });

  //play the carousel
  jQuery("#mybuttonorsomethingelse").on('myotherevent', function () {
    var carousel = bootstrap.Carousel.getInstance(myCarousel) // Retrieve a Carousel instance
    carousel.cycle(); //play the carousel
  });

I hope this help you all.

[AlexNzMe]

Thanks @dariemlazaro this worked for me. Hours spent till I found your answer. Bootstrap carousel documentation is really sucks.

[signalpoint]

Once I added data-bs-pause="false" to my carousel, my carousel.pause() worked properly.

[EquipeWEBMans]

This worked for me in BS 5.3

Note: I had to add data-bs-touch="true" in order to activate touch slide.

<div class="carousel slide" id="coupons-carousel" data-bs-pause="false" data-bs-touch="true">

// * BR Carousel (With BS)
const couponCarousel = document.getElementById("coupons-carousel");
if (couponCarousel) {
    const playPauseBtn = document.getElementById("coupons-carousel-play-btn");
    const carousel = Carousel.getOrCreateInstance(couponCarousel, {
        // * Start cycle on swipe (or play btn)
        ride: true
    });
    let isRunning = false;

    if (playPauseBtn) {
        const updatePlayBtnStatus = () => {
            // * Toggle once
            if (!isRunning) {
                playPauseBtn.children.item(0)?.classList.remove("d-none");
                playPauseBtn.children.item(1)?.classList.add("d-none");
            } else {
                playPauseBtn.children.item(0)?.classList.add("d-none");
                playPauseBtn.children.item(1)?.classList.remove("d-none");
            }
        };
        playPauseBtn.addEventListener("click", () => {
            if (isRunning) {
                carousel.pause(true);
            } else {
                carousel.cycle();
            }
            isRunning = !isRunning;
            updatePlayBtnStatus();
        });
        couponCarousel.addEventListener("slide.bs.carousel", () => {
            isRunning = true;
            updatePlayBtnStatus();
        });
    }
}

[ghost]

All mentioned here did not work in BS 5.3 :-(

[Faberita]

Hi, you can try this solution:

    <div class='container'>
    <div class="container">
    <div class="row">
      <div class="col-3">
        <button id='btnPause' class="btn btn-secondary">Stop carousel</button>
      </div>
      <div class="col">
              <div id="carouselAnimals" class="carousel slide" data-bs-ride="carousel" data-bs-interval='1000' data-interval='100' >
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://placekitten.com/800/500" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://loremflickr.com/800/500" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="http://placeimg.com/800/500/animals" class="d-block w-100" alt="...">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>



  <script>  

 var btnpressed= false;
    var carouselElement = document.getElementById("carouselAnimals");
    var carousel = new bootstrap.Carousel(carouselElement, {
      interval: 100
    });
  
  document.getElementById("btnPause").addEventListener("click", function () {
    

    if(btnpressed==false)
      {
        carousel.pause();
        console.log(carousel);
      btnpressed= true;
      }
    else    
      {
        carousel.cycle();
      btnpressed= false;
      }


  });


   </script>

[bhojpress]

Bootstrap v5.3.2:

Timeout like 1000 worked for me and nothing else:

button.addEventListener("click", (event) => {
  const element = document.getElementById('carousel-element');
  const instance = bootstrap.Carousel.getInstance(element);
  setTimeout(() => {
    instance.pause();
  }, 1000);
});

So, with this investigation, I think Bootstrap is not able to pause the carousel as it's in cycling state when button is clicked and it's taking some time to take effect.

---

Timeout with 600 doesn't work but timeout delay with 601 worked fine too. As I noticed the following css from bootstrap:

.carousel-item {
  transition: transform .6s ease-in-out;
}

To conclude, this workaround solution with 1000 delay time is also not bad because next cycle occurs at 1200, and you will see the carousel in paused state.

[dariemlazaro]

Perhaps the carousel has its own timeout() function and overwrites ours, overriding it if we designate a shorter time.