Bootstrap - Carousel

---

---

This chapter discusses about the Bootstrap component carousel. The Carousel component in Bootstrap is used to display a rotating set of images or content in a slideshow format.

Overview

• The component provides multiple options for customization, including slide transitions, interval timing, and navigation controls.

• It allows users to easily navigate through the content and is commonly used for showcasing products or featured content on a website.

• To ensure optimal performance, carousels require manual initialization through the carousel constructor method. If not initialized, certain event listeners (specifically those necessary for touch/swipe support) will remain unregistered until a control or indicator is activated by the user.

• The carousel with the data-bs-ride="carousel" attribute is initialized automatically on page load. No need to explicitly initialize such carousels.

• Bootstrap does not support nested carousels. They can also often cause usability and accessibility challenges.

• The animation effect of the carousel component depends on the prefers-reduced-motion media query.

Let us see an example of a basic carousel:

Example

You can edit and try running this code using the Edit & Run option.

  
    
    
    
    
    
    
  
  
	  
Carousel example
	

		
		

		  

			
Slide 1
			
		  
		  

			
Slide 2
			
		  
		  

			
Slide 3
			
		  
		
		
		    
		    Previous
		
		
		    
		    Next
		
		
	  
  

Points to remember:

• The slide dimensions are not automatically normalized in carousels.

• You need to use additional utilities or custom styles to size the content in carousels.

• The previous/next controls and indicators are not explicitly required, as carousels support them. Add and customize the controls as per your requirement.

• Do not forget to add the .active class to one of the slides, else the carousel will not be visible.

• Ensure to set a unique id on the .carousel for optional controls, in case you are using multiple carousels on a single page.

• You must add the data-bs-target attribute to the control and indicator elements or href for links, that matches the id of the .carousel element.

Indicators

Indicators can be added along with the previous/next controls, such that the user has the access to jump directly to a specific slide.

Let us see an example for adding indicators:

Example

You can edit and try running this code using the Edit & Run option.

  
    
    
    
    
    
    
  
  
	  
Carousel Indicators
		

		
			

				

				  
1
				  
2
				  
3
				
				

				  

					
				  
				  

					
				  
				  

					
				  
				
				
				    
				    Previous
				
				
				    
				    Next
				
			  
		
	  
  

Captions

Captions can be added to the slides with the .carousel-caption element within any .carousel-item. The caption can be hidden using the class .d-none and can be made visible using the classes .d-{breakpoint}-block.

Let us see an example for adding captions:

Example

You can edit and try running this code using the Edit & Run option.

  
    
    
    
    
    
    
  
  
	  
Carousel Captions
		

		
			

                    

				        
1
				        
2
				        
3
				    
				

				  

					
					

						
Caption for first slide
						
This is the first slide of the carousel component.
					
				  
				  

					
					

						
Caption for second slide
						
This is the second slide of the carousel component.
					
				  
				  

					
					

						
Caption for third slide
						
This is the third slide of the carousel component.
					
				  
				
				
                    
                    Previous
                
                
                    
                    Next
                
			  
		
	  
  

Crossfade

To apply a fade transition to your carousel slides instead of a slide, include .carousel-fade. However, if your carousel content comprises solely text slides, it may be necessary to add .bg-body or utilize custom CSS for appropriate crossfading in .carousel-items.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

  
    
    
    
    
    
    
  
  
	  
Carousel Animation - Fade
		

		
			

				

				  

					
					

						
First slide
					
				  
				  

					
					

						
Second slide
					
				  
				  

					
					

						
Third slide
					
				  
				
				
				    
				    Previous
				
				
				    
				    Next
				
			  
		
	  
  

Autoplaying carousel

• The carousels can be made to autoplay on page load by setting the ride option to carousel.

• While you hover with the mouse, the autoplaying carousels pause automatically. You can control this behavior with the option pause.

• The carousel will stop cycling when the webpage is not v isible (either the browser window is inactive or minimized). in case of browsers support that support the page visibility API.

To ensure accessibility, it is advised to steer clear of autoplaying carousels. Should your page contain such a feature, we advise adding a separate button or control to enable explicit pausing or stopping of the carousel.

Let us see an example for autoplaying carousel:

Example

You can edit and try running this code using the Edit & Run option.

  
    
    
    
    
    
    
  
  
	  
Carousel Autoplaying
		
			

				

				  

					
					
First slide

				  
				  

					
					
Second slide

				  
				  

					
					
Third slide

				  
				
				
				    
				    Previous
				
				
				    
				    Next
				
			  
		
	  

When the ride option is set to true, instead of carousel, the carousel will not automatically start to cycle on page load. It will start only after the user's interaction.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

  
    
    
    
    
    
    
  
  
	  
Carousel Autoplaying on Ride
		
			

				

				  

					
					
First slide

				  
				  

					
					
Second slide

				  
				  

					
					
Third slide

				  
				
				
				    
				    Previous
				
				
				    
				    Next
				
			  
		
	  

Individual .carousel-item interval

To a .carousel-item add data-bs-interval="" to change the amount of time to set between automatically cycling to next item.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

  
    
    
    
    
    
    
  
  
	  
Carousel Autoplay Time Interval
		
			

				

				  

					
					
First slide

				  
				  

					
					
Second slide

				  
				  

					
					
Third slide

				  
				
				
				    
				    Previous
				
				
				    
				    Next
				
			  
		
	  

Autoplaying carousel without controls

Carousel can be played without any controls as well.

Here is an example:

Example

You can edit and try running this code using the Edit & Run option.

  
    
    
    
    
    
    
  
  
	  
Carousel Autoplay without controls
		
			

				

				  

					
					
First slide

				  
				  

					
					
Second slide

				  
				  

					
					
Third slide

				  
				
			  
		
	  

Disable touch swiping

Touchscreen devices can swipe left or right to switch between slides on carousels. Turning off the touch option can disable this feature, by setting the value as false.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

  
    
    
    
    
    
    
  
  
	  
Carousel disable touch swiping
		
			

				

				  

					
					
First slide

				  
				  

					
					
Second slide

				  
				  

					
					
Third slide

				  
				
				
					
					Previous
				  
				  
					
					Next
				  
			  
		
	  

Dark variant

Attention! The use of dark variants for components has been deprecated in v5.3.0 due to the implementation of color modes. Rather than adding .carousel-dark, set data-bs-theme="dark" on the root element, a parent wrapper, or the component itself.