Carruseles de espectros

Posted on by Rudeus Greyrat

En este artículo, veremos cómo crear una presentación de diapositivas de imágenes para su página web para que se vea más atractiva. Carrusel se utiliza para crear una presentación de diapositivas de imágenes para la página web para que se vea más atractiva.

Espectro Carruseles Clase:

  • carrusel: esta clase se utiliza para crear la interfaz de carruseles.
  • carrusel-localizador: Esta clase se utiliza para presentar la imagen o el contenido del carrusel.
  • carrusel-contenedor: esta clase se utiliza para contener elementos de carrusel.
  • carrusel-elemento: Esta clase se utiliza para contener la imagen del carrusel.
  • carrusel-nav: esta clase se utiliza para crear un carrusel de navegación.

Sintaxis:

<div class="carousel">
    <input class="carousel-locator" ...>
    <div class="carousel-container">
           <figure class="carousel-item">
               ...
           </figure>
    </div>
    <div class="carousel-nav">
        ...
    </div>
</div>

Ejemplo 1: en este ejemplo, crearemos carruseles con dos imágenes, el máximo se puede hacer en el espectro es 8 pero eso también se puede manipular.

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>

Producción:

 

Ejemplo 2: En este ejemplo, crearemos un carrusel de tres imágenes.

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>

Producción:

 

Referencia: https://picturepan2.github.io/spectre/experimentals/carousels.html

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *