In this article, we will see how to create an image slide show for your webpage to make it look more attractive. Carousel is used to create an image slide show for the webpage to make it look more attractive.
Spectre Carousels Class:
- carousel: This class is used to create Carousels interface.
- carousel-locator: This class is used to present the image or the content of the carousel.
- carousel-container: This class is used to hold carousel items.
- carousel-item: This class is used to hold the carousel image.
- carousel-nav: This class is used to create a carousel nav.
Syntax:
<div class="carousel">
<input class="carousel-locator" ...>
<div class="carousel-container">
<figure class="carousel-item">
...
</figure>
</div>
<div class="carousel-nav">
...
</div>
</div>Example 1: In this example, we will create Carousels with two images, max can be done in spectre is 8 but that can be manipulated as well.
HTML
<!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">
<!-- carousel locator -->
<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="">
<!-- carousel container -->
<div class="carousel-container">
<!-- carousel item -->
<figure class="carousel-item">
<label class="item-prev btn
btn-action btn-lg" for="slide-4">
<i class="icon icon-arrow-left"></i>
</label>
<label class="item-next btn btn-action
btn-lg" for="slide-2">
<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" for="slide-1">
<i class="icon icon-arrow-left"></i>
</label>
<label class="item-next btn btn-action
btn-lg" for="slide-3">
<i class="icon icon-arrow-right"></i>
</label>
<img class="img-responsive rounded" src=
style="height: 100%;">
</figure>
</div>
<!-- carousel navigation -->
<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>
</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we will create a three-image carousel.
HTML
<!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">
<!-- carousel locator -->
<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="">
<!-- carousel container -->
<div class="carousel-container">
<!-- carousel item -->
<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>
<!-- carousel navigation -->
<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>
|
Output:
Reference: https://picturepan2.github.io/spectre/experimentals/carousels.html