Bootstrap 5 Carousel: Learn with 8 Demos

Carousel component in Bootstrap 5

In the previous version of Bootstrap (Bootstrap 3 Carousel), you had to use jQuery in order to use the carousel component.
In Bootstrap 5, this is no more required. Instead, it uses a little JavaScript and CSS 3D transforms.

Quick Demos Online:

What is a carousel?

A carousel is a slideshow component that you may use for various purposes on your website. For example, sliding the important marketing information with images.

A restaurant can use it for sliding different food deals.
A software product component may use it for sliding the product features.
E-commerce stores can use for special promotions with discounts, new arrivals.
And so many uses of this sliding component – like a carousel.

In this tutorial, we will show you examples of a basic to the advanced carousel with various features.

A simple example of Bootstrap 5 carousel

In the first example, we have a simple sliding images component like a carousel. The carousel is without any text, controls to move next/prev etc. Have a look at the code and output below:

See online demo and code

<!DOCTYPE html>

<head>

<style>

img{

width:100%;

}

</style>

</head>

<body>

<h4>Bootstrap 5 Carousel Demo</h4>

</div>

</div>

</div>

</body>

</html>

This is how the carousel is created:

The main <div> is assigned the .carousel and .slide. This creates a carousel.
In the next <div>, we assigned .carousel-inner class that adds slides to the carousel.
For specifying the image (and other info), we used another <div> and assigned the .carousel-item
Add as many div elements with this class as required.
Add .active class to .carousel-item for the slide that you want to show first as the web page loads. In our example, we assigned this to the third div.

An example of carousel with left/right controls

Adding to the above example, we have a carousel with left and right arrows. So, instead of just moving sliding images automatically, you are giving an option to the user to move quickly by using arrows.

See an example below:

See online demo and code

<!DOCTYPE html>

<head>

<style>

img{

width:100%;

}

</style>

</head>

<body>

<h4 class="text-info">Bootstrap 5 Carousel Demo with Arrow Controls</h4>

</div>

</div>

</div>

</a>

</a>

</div>

</body>

</html>

This is how arrows are added to the carousel:

Before the closing of the .carousel <div>, two <a> tags are used.
The first <a> is assigned .carousel-control-prev class and the second .carousel-control-next
Notice the href=”jazdemo”. This is mapped to the .carousel <div> id.
In the <span> tag, inside each <a> tag, the icon classes are assigned. The .carousel-control-prev-icon to the first <a> and .carousel-control-next-icon to the second <a> tag.

A carousel with indicators example

It’s another useful feature provided in the slideshow (like a carousel) to let users know which slide they are on. This might especially be useful for more sliding images.

The example below adds indicators to the above carousel – along with controls:

See online demo and code

<!DOCTYPE html>

<head>

<style>

img{

width:100%;

}

</style>

</head>

<body>

<h4 class="text-danger">Bootstrap 5 Carousel Demo with Indicators</h4>

</ol>

</div>

</div>

</div>

</a>

</a>

</div>

</body>

</html>

So, how indicators are added in our demo?

After the main <div> containing .carousel class, an ordered list <ol> is added and .carousel-indicators class is assigned.
Then three <li> items, as per the number of slides in the carousel, are added.
Ensure that .active class is assigned to an <li>, otherwise, the carousel will not be visible.
See the other code for relating the slide to the indicator.

Adding information to sliding images

To make slide images with information, you may add captions easily. You may also manage to show information on the big screens and hide it on smartphones by using utility classes. First, see an example below:

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

<!DOCTYPE html>

<head>

<style>

img{

width:100%;

}

</style>

</head>

<body>

<h4 class="text-danger">Bootstrap 5 Carousel Demo with Captions</h4>

</ol>

<h5 class="text-info">Heading for Slide Number 1</h5>

<p class="text-primary">More Information in Paragraph</p>

</div>

<h5>Heading for Slide Number 3</h5>

<p>More Information in Paragraph</p>

</div>

<h5>Heading for Slide Number 13</h5>

<p>More Information in Paragraph</p>

</div>

</a>

</a>

</div>

</body>

</html>

How to add captions?

Just after the <img> tag for each slide, a <div> with .carousel-caption class is assigned.

There you can add headings like <h1> to <h6>, paragraphs, etc. for displaying the information as shown in the image.

Multiple image slider demo using Bootstrap 5

In the following demo, we have a carousel that displays multiple slides at one time. In the demo, four slides are displayed that adjust the image size per available width (display screen).

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

<!DOCTYPE html>

<head>

<style>

@media (max-width: 767px) {

.carousel-inner .carousel-item > div {

display: none;

}

.carousel-inner .carousel-item > div:first-child {

display: block;

}

.carousel-inner .carousel-item.active,

.carousel-inner .carousel-item-next,

.carousel-inner .carousel-item-prev {

display: flex;

}

/* medium and up screens */

@media (min-width: 768px) {

.carousel-inner .carousel-item-end.active,

.carousel-inner .carousel-item-next {

transform: translateX(25%);

}

.carousel-inner .carousel-item-start.active,

.carousel-inner .carousel-item-prev {

transform: translateX(-25%);

}

.carousel-inner .carousel-item-end,

.carousel-inner .carousel-item-start {

transform: translateX(0);

}

</style>

</head>

<body>

<h4 class="text-info">Bootstrap 5 Multiple Image Slider - Carousel</h4>

</div>

<div class="card-img-overlay text-white">Banana</div>

</div>

</div>

<div class="card-img-overlay text-white">Mango</div>

</div>

</div>

<div class="card-img-overlay text-white">Apple</div>

</div>

</div>

<div class="card-img-overlay text-white">Pine Apple</div>

</div>

</div>

<div class="card-img-overlay text-white">Currant</div>

</div>

</a>

</a>

</div>

let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {

const minPerSlide = 4

let next = el.nextElementSibling

for (var i=1; i<minPerSlide; i++) {

if (!next) {

// wrap carousel by using first child

next = items[0]

}

let cloneChild = next.cloneNode(true)

el.appendChild(cloneChild.children[0])

next = next.nextElementSibling

}

})

</script>

</body>

</html>

In the above code, note the CSS in the style section, markup, and JavaScript code before the </body> tag.

Credit:

https://codepen.io/hellomev/pen/LYORMQW

Changing the interval for slideshow

The default value for slides for automatically moving to the next slide is 5000 ms i.e. 5 seconds. You may change the interval by using the data attribute:

data-bs-interval = “3000” etc.

This applies to each carousel item separately.

In the example below we set the interval value as 1000 ms i.e. one second. Have a look:

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

<!DOCTYPE html>

<head>

<style>

img{

width:100%;

}

</style>

</head>

<body>

<h4 class="text-success">Bootstrap 5 Carousel Demo with Less Interval</h4>

</ol>

<h5 class="text-info">Heading for Slide Number 1</h5>

<p class="text-primary">More Information in Paragraph</p>

</div>

<h5>Heading for Slide Number 3</h5>

<p>More Information in Paragraph</p>

</div>

<h5>Heading for Slide Number 13</h5>

<p>More Information in Paragraph</p>

</div>

</a>

</a>

</div>

</body>

</html>

An example of creating vertical carousel in Bootstrap 5

The following example shows creating a carousel where slides move vertically.

In all our above examples, slides move horizontally whether it’s a single image slider or multiple.

In this example, you can see the indicators are visible on the right side and arrows for moving the slides towards the top and bottom of the slide.

You can test the example on your own by copying the complete code in your editor and just replacing the image paths:

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

<!DOCTYPE html>

<head>

<style>

/**

* User: Alessandro Battaglia

* Date: 17/05/2022

* Time: 15:24

.vertical.carousel .carousel-item {

overflow: hidden;

}

.vertical.carousel .carousel-item-next:not(.carousel-item-start),

.vertical.carousel .active.carousel-item-end {

transform: translateY(100%);

}

.vertical.carousel .carousel-item-prev:not(.carousel-item-end),

.vertical.carousel .active.carousel-item-start {

transform: translateY(-100%);

}

.vertical.carousel .carousel-indicators {

top: 0;

left: unset;

margin-left: unset !important;

margin-right: 1rem;

flex-direction: column;

}

.vertical.carousel .carousel-indicators [data-bs-target] {

height: 30px;

width: 3px;

}

.vertical.carousel .carousel-control-prev,

.vertical.carousel .carousel-control-next {

width: 100%;

height: 60px;

}

.vertical.carousel .carousel-control-prev-icon,

.vertical.carousel .carousel-control-next-icon {

transform: rotateZ(90deg);

}

.vertical.carousel .carousel-control-next {

top: unset;

bottom: 0;

}

</style>

</head>

<body>

<h4 class="text-danger">Bootstrap 5 Vertical Carousel Demo</h4>

</div>

<h5>First slide label</h5>

<p>Some representative placeholder content for the first slide.</p>

</div>

<h5>Second slide label</h5>

<p>Some representative placeholder content for the second slide.</p>

</div>

<h5>Third slide label</h5>

<p>Some representative placeholder content for the third slide.</p>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</body>

</html>

Credit for CSS:

Alessandro Battaglia

Making slideshow crossfade example

In all the above demos, (horizontal or vertical), the image moves in a sliding way. You can also create a carousel where next slide appears in a fading transition – easily.

For that, simply add the .carousel-fade class to the main <div> that contains .carousel. That’s it!

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!DOCTYPE html>

<head>

<style>

img{

width:100%;

}

</style>

</head>

<body>

<h4 class="text-danger">Bootstrap 5 Carousel Demo with Fade Transition </h4>

</ol>

<h5 class="text-info">Heading for Slide Number 1</h5>

<p class="text-primary">More Information in Paragraph</p>

</div>

<h5>Heading for Slide Number 3</h5>

<p>More Information in Paragraph</p>

</div>

<h5>Heading for Slide Number 13</h5>

<p>More Information in Paragraph</p>

</div>

</a>

</a>

</div>

</body>

</html>

Reference:

https://getbootstrap.com/docs/5.0/components/carousel/

Carousel

Carousel component in Bootstrap 5

What is a carousel?

A simple example of Bootstrap 5 carousel

An example of carousel with left/right controls

A carousel with indicators example

Adding information to sliding images

Multiple image slider demo using Bootstrap 5

Changing the interval for slideshow

An example of creating vertical carousel in Bootstrap 5

Making slideshow crossfade example

Related Tutorials: