<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Carousel</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
/* Set the image size */
.carousel-inner img {
width: 100%;
}
</
style
>
</
head
>
<
body
>
<
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"
width
=
"600"
height
=
"400"
>
<
div
class
=
"carousel-caption"
>
<
h3
class
=
"text-warning"
>
GeeksforGeeks: Interview Preparation Caption
</
h3
>
</
div
>
</
div
>
<
div
class
=
"carousel-item"
>
<
img
src
=
alt
=
"GFG"
width
=
"600"
height
=
"400"
>
<
div
class
=
"carousel-caption"
>
<
h3
class
=
"text-warning"
>
GeeksforGeeks: Geeks Classes Caption
</
h3
>
</
div
>
</
div
>
<
div
class
=
"carousel-item"
>
<
img
src
=
alt
=
"GFG"
width
=
"600"
height
=
"400"
>
<
div
class
=
"carousel-caption"
>
<
h3
class
=
"text-warning"
>
GeeksforGeeks: Geeks Classes Caption
</
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
>
</
body
>
</
html
>