Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Example

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Following example includes Slide, Controls, Indicators, Captions etc.

Preview
HTML

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.



    
        
        
        
    
    
        
            
            
                First slide label
                
                    Nulla vitae elit libero, a pharetra augue mollis
                    interdum.
                
            
        
        
            
            
                Second slide label
                
                    Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit.
                
            
        
        
            
            
                Third slide label
                
                    Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur.
                
            
        
    
    
        
        Previous
    
    
        
        Next

Getting Started

Content & Layout

Components

Utilities

Carousel

Example

First slide label

Second slide label

Third slide label