unable to pause bootstrap5 carousel #35673

millerthegorilla · 2022-01-10T13:20:36Z

millerthegorilla
Jan 10, 2022

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 · 2022-01-10T13:42:19Z

florianlacreuse
Jan 10, 2022

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

0 replies

millerthegorilla · 2022-01-10T21:41:43Z

millerthegorilla
Jan 10, 2022
Author

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....

0 replies

millerthegorilla · 2022-01-10T22:15:10Z

millerthegorilla
Jan 10, 2022
Author

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.

0 replies

florianlacreuse · 2022-01-11T09:10:17Z

florianlacreuse
Jan 11, 2022

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

0 replies

millerthegorilla · 2022-01-11T11:17:35Z

millerthegorilla
Jan 11, 2022
Author

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!

0 replies

millerthegorilla · 2022-01-11T12:06:17Z

millerthegorilla
Jan 11, 2022
Author

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...

0 replies

millerthegorilla · 2022-01-11T12:15:02Z

millerthegorilla
Jan 11, 2022
Author

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

but it works in the console...

0 replies

millerthegorilla · 2022-01-11T12:33:42Z

millerthegorilla
Jan 11, 2022
Author

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).

0 replies

millerthegorilla · 2022-01-23T16:51:48Z

millerthegorilla
Jan 23, 2022
Author

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.

0 replies

millerthegorilla · 2022-01-23T16:59:52Z

millerthegorilla
Jan 23, 2022
Author

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

3 replies

millerthegorilla Jan 23, 2022
Author

doesn't work

dariemlazaro Jul 6, 2022

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 Jul 21, 2022

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

signalpoint · 2023-02-02T15:31:56Z

signalpoint
Feb 2, 2023

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

1 reply

EquipeWEBMans Nov 6, 2023

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();
        });
    }
}

ElmarBeyond · 2023-10-11T11:43:33Z

ElmarBeyond
Oct 11, 2023

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

1 reply

Faberita Jan 24, 2024

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 · 2024-02-09T08:06:17Z

bhojpress
Feb 9, 2024

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.

1 reply

dariemlazaro Apr 7, 2024

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

unable to pause bootstrap5 carousel #35673

Replies: 13 comments · 6 replies

millerthegorilla Jan 10, 2022 Author

millerthegorilla Jan 10, 2022 Author

millerthegorilla Jan 11, 2022 Author

millerthegorilla Jan 11, 2022 Author

millerthegorilla Jan 11, 2022 Author

millerthegorilla Jan 11, 2022 Author

millerthegorilla Jan 23, 2022 Author

millerthegorilla Jan 23, 2022 Author

millerthegorilla Jan 23, 2022 Author

Replies: 13 comments 6 replies

millerthegorilla
Jan 10, 2022
Author

millerthegorilla
Jan 10, 2022
Author

millerthegorilla
Jan 11, 2022
Author

millerthegorilla
Jan 11, 2022
Author

millerthegorilla
Jan 11, 2022
Author

millerthegorilla
Jan 11, 2022
Author

millerthegorilla
Jan 23, 2022
Author

millerthegorilla
Jan 23, 2022
Author

millerthegorilla Jan 23, 2022
Author