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.
<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.
Example 2: In this example, we will create a three-image carousel.
My Personal Notes arrow_drop_up
Please Login to comment...