<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Bootstrap 5 | Carousel
</
title
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin
=
"anonymous"
>
<
script
src
=
integrity
=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
style
>
/* Customizing the carousel for white background */
.carousel-indicators .active {
background-color: green;
}
.carousel-indicators li {
background-color: burlywood;
}
</
style
>
<
body
style
=
"text-align: center;"
>
<
div
class
=
"container mt-3"
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
div
id
=
"GFG"
class
=
"carousel slide"
data-ride
=
"carousel"
>
<
ul
class
=
"carousel-indicators"
>
<
li
data-target
=
"#GFG"
data-slide-to
=
"0"
class
=
"active"
>
</
li
>
<
li
data-target
=
"#GFG"
data-slide-to
=
"1"
></
li
>
<
li
data-target
=
"#GFG"
data-slide-to
=
"2"
></
li
>
</
ul
>
<
div
class
=
"carousel-inner"
>
<
div
class
=
"carousel-item active"
>
<
img
src
=
alt
=
"GFG"
>
<
div
class
=
"carousel-caption"
>
<
h3
class
=
"text-warning"
>
Image 1
</
h3
>
</
div
>
</
div
>
<
div
class
=
"carousel-item"
>
<
img
src
=
alt
=
"GFG"
>
<
div
class
=
"carousel-caption"
>
<
h3
class
=
"text-warning"
>
Image 2
</
h3
>
</
div
>
</
div
>
<
div
class
=
"carousel-item"
>
<
img
src
=
alt
=
"GFG"
/>
<
div
class
=
"carousel-caption"
>
<
h3
class
=
"text-warning"
>
Image 3
</
h3
>
</
div
>
</
div
>
</
div
>
<
a
class
=
"carousel-control-prev"
href
=
"#GFG"
data-slide
=
"prev"
>
<
span
class
=
"carousel-control-prev-icon"
>
</
span
>
</
a
>
<
a
class
=
"carousel-control-next"
href
=
"#GFG"
data-slide
=
"next"
>
<
span
class
=
"carousel-control-next-icon"
>
</
span
>
</
a
>
</
div
>
</
div
>
</
body
>
</
html
>