## Slideshow

# Bootstrap 5 Slideshow component

Responsive slideshow built with the latest Bootstrap 5. Slideshow is a component which cycles through different elements such as photos, videos, or text. Many examples and easy tutorials.

## Basic example

Here’s a slideshow with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment.

Show code Edit in sandbox
`
`

## Adding controls

You can add the previous and next controls:

Show code Edit in sandbox
`
`

## Slideshow buttons

You can also add buttons to the slideshow, alongside the controls, too.

Show code Edit in sandbox
`
`

## Square buttons

To change the shape of buttons, you have to add `width` and `height` to these elements. Also check the documentation about square buttons.

Show code Edit in sandbox
`
` `#square-buttons { width: 10px; height: 10px }`

## Rounded buttons

To change the shape of buttons to rounded, you have to also add `border-radius` to these elements. You'll find more information about `border-radius` here.

Show code Edit in sandbox
`
` `#square-buttons { width: 10px; height: 10px; border-radius: 100% }`

## With text

Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.

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

Show code Edit in sandbox
`

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

`

## Dark variant

Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. You'll find more information about dark mode here.

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

Show code Edit in sandbox
`

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

`

## Automatic slide

You can change the length of delay between items by setting `data-mdb-interval=""`. Add this option to the class `.carousel-item`.

Show code Edit in sandbox
`
`

## Manual slide

If you don't want an automatic slide, you have to set `data-mdb-interval="false"`.

Show code Edit in sandbox
`
`

## Without loop

To stop cycling at the end of a slideshow, you have to add `data-mdb-wrap="false"` to the main `div`.

Show code Edit in sandbox
`
`

## Product Cards

Here’s an example slideshow with product cards which have star ratings.

Today's Combo Offer

x4

Laptops

$1099

##### HP Notebook

##### $999

Available: 6

Today's Combo Offer

x2

Laptops

$1199

##### HP Envy

##### $1099

Available: 7

Today's Combo Offer

x3

Laptops

$1399

##### Toshiba B77

##### $1299

Available: 5

Show code Edit in sandbox
`

Today's Combo Offer

x4

Laptops

$1099

##### HP Notebook

##### $999

Available: 6

Today's Combo Offer

x2

Laptops

$1199

##### HP Envy

##### $1099

Available: 7

Today's Combo Offer

x3

Laptops

$1399

##### Toshiba B77

##### $1299

Available: 5

`

## Full page

An example of full-page usage of the slideshow with text overlay.

Click on the image to see a live demo.

## Related resources

Bootstrap Slideshow Tutorial Slideshow Video Slideshow Quotes Slideshow Multi-item Slideshow Testimonial Slider Square Buttons Dark Mode Product Cards