<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
>
<
center
>
<
h1
class
=
"text-success"
>GeeksforGeeks</
h1
>
<
strong
>Spectre Carousel</
strong
>
<
br
><
br
>
<
div
class
=
"carousel"
>
<
input
class
=
"carousel-locator"
id
=
"slide-1"
type
=
"radio"
name
=
"carousel-radio"
hidden
=
""
checked
=
""
>
<
input
class
=
"carousel-locator"
id
=
"slide-2"
type
=
"radio"
name
=
"carousel-radio"
hidden
=
""
>
<
input
class
=
"carousel-locator"
id
=
"slide-3"
type
=
"radio"
name
=
"carousel-radio"
hidden
=
""
>
<
div
class
=
"carousel-container"
>
<
figure
class
=
"carousel-item"
>
<
label
class
=
"item-prev btn btn-action btn-lg"
>
<
i
class
=
"icon icon-arrow-left"
></
i
>
</
label
>
<
label
class
=
"item-next btn btn-action btn-lg"
>
<
i
class
=
"icon icon-arrow-right"
></
i
>
</
label
>
<
img
class
=
"img-responsive rounded"
src
=
style
=
"height: 100%;"
>
</
figure
>
<
figure
class
=
"carousel-item"
>
<
label
class
=
"item-prev btn btn-action btn-lg"
>
<
i
class
=
"icon icon-arrow-left"
></
i
>
</
label
>
<
label
class
=
"item-next btn btn-action btn-lg"
>
<
i
class
=
"icon icon-arrow-right"
></
i
>
</
label
>
<
img
class
=
"img-responsive rounded"
src
=
style
=
"height: 100%;"
>
</
figure
>
<
figure
class
=
"carousel-item"
>
<
label
class
=
"item-prev btn btn-action btn-lg"
>
<
i
class
=
"icon icon-arrow-left"
></
i
>
</
label
>
<
label
class
=
"item-next btn btn-action btn-lg"
>
<
i
class
=
"icon icon-arrow-right"
></
i
>
</
label
>
<
img
class
=
"img-responsive rounded"
src
=
style
=
"height: 100%;"
>
</
figure
>
</
div
>
<
div
class
=
"carousel-nav"
>
<
label
class
=
"nav-item text-hide c-hand"
for
=
"slide-1"
>
1
</
label
>
<
label
class
=
"nav-item text-hide c-hand"
for
=
"slide-2"
>
2
</
label
>
<
label
class
=
"nav-item text-hide c-hand"
for
=
"slide-3"
>
3
</
label
>
</
div
>
</
div
>
</
center
>
</
body
>
</
html
>