Bootstrap v5.0 Carousel stop autoplay after a carousel item is selected (clicked)

Question

I am trying to stop the carousel autoplay with jQuery after I click on a carousel item. But none of my attempts works. Can anyone help me with it?

Thanks!

This is my attempt 1:

 $(".carousel-item .card-selection").on("click", function (){
        $("#carouselExampleControls").attr("data-bs-interval", "false");
})

I have also tried (after removing the data-bs-ride="carousel" attribute in HTML):

 $(".carousel-item .card-selection").on("click", function (){
        $("#carouselExampleControls").carousel({
            pause: true,
            interval: false
        });
})

This is the carousel:







  
    
      
        
          
            
                                            
                                            
                                            
                                                1
                                                This is a wider card with supporting text below as a natural
                                                    lead-in to additional content. This content is a little bit longer.
                                            

                                            
          
        
      
    
    
      
        
          
            
                                                
                                                
                                                
                                                    2
                                                    This card has supporting text below as a natural lead-in to
                                                        additional content.

user_2333214 · Answer

I've got it to work like this, there might be a better "bootstrap" way of doing this.

var myCarousel = document.querySelector('#carouselExampleControls')
var carousel = new bootstrap.Carousel(myCarousel, {
  ride: 'carousel',
  interval: 100,
});

let paused = false;
$('.card-body').on('click', () => {
  if (paused) {
    carousel.cycle()
    paused = false;
  } else {
    carousel.pause();
    paused = true;
  }
});







  
    
      
        
          
            
                                            
                                            
                                            
                                                1
                                                This is a wider card with supporting text below as a natural
                                                    lead-in to additional content. This content is a little bit longer.
                                            

                                            
          
        
      
    
    
      
        
          
            
                                                
                                                
                                                
                                                    2
                                                    This card has supporting text below as a natural lead-in to
                                                        additional content.

user_1011984 · Answer

If I understand your comment about “after a card is selected” — you’re looking for the user to be able to click the radio button on the card, and doing so will stop the carousel from cycling (at least until the user clicks the radio button again to deselect the card).

You can do this with just JavaScript. Bootstrap 5 doesn’t need jQuery, and since Bootstrap 5 only supports modern browsers (no IE), you shouldn’t need jQuery.

You can use Bootstrap’s carousel instance to stop and restart the carousel.

var myCarousel = document.getElementById("carouselExampleControls");
var radios = document.querySelectorAll("input[type=radio]");
var cycling = true;

radios.forEach(function(radio) {
    radio.checked = false;
    radio.addEventListener("click", function(e) {
        var carousel = bootstrap.Carousel.getInstance(myCarousel);

        if (cycling === true) {
            carousel.pause();
            cycling = false;
        } else {
            carousel.cycle();
            cycling = true;
            e.target.checked = false;
        }
    });
});

.carousel-item {
    height: 12.5rem;
}





    
        
            
                
                    
                        
                            
                                
                                
                            
                            
                                1
                                This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                            
                        
                    

                    
                        
                            
                                
                                
                            
                            
                                2
                                This card has supporting text below as a natural lead-in to additional content.

I did move your div out of the label (divs aren’t supposed to be a child of a label) and I wasn’t sure why you had a row and col-6 inside the carousel-item, so I changed those. I also added a fixed height to the cards.

Bootstrap v5.0 Carousel stop autoplay after a carousel item is selected (clicked)

2 Answers