Horje
Spectre Carousels

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=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182303/ReactJS-Tutorial.png"
                        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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                        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=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182303/ReactJS-Tutorial.png"
                        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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                        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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210315185133/jQuery-Tutorial.png"
                        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


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Onsen UI CSS Component Basic Text Input Onsen UI CSS Component Basic Text Input
Bulma Image Variables Bulma Image Variables
Foundation CSS Accordion and URLs Foundation CSS Accordion and URLs
Bulma Different column sizes per breakpoint Bulma Different column sizes per breakpoint
Pure CSS Grids on Mobile Pure CSS Grids on Mobile

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje