¿Cómo crear un carrusel de reseñas usando JavaScript?

En este artículo, hemos creado un carrusel de reseñas usando JavaScript . También hemos utilizado HTMM y CSS básicos para diseñar. Un carrusel es básicamente un tipo de presentación de diapositivas que se utiliza para mostrar imágenes, texto o ambos de manera cíclica. El carrusel de reseñas se utiliza para mostrar las reseñas.

Acercarse: 

• En la etiqueta del cuerpo, cree una etiqueta div anidada con el nombre de la clase que contenga la imagen, el nombre y el texto del revisor.
• Agregue los botones anterior y siguiente para verificar las revisiones anteriores y siguientes, respectivamente.
• Para diseñar, agregue algunas propiedades CSS en la etiqueta de estilo , como alineación, tamaño de fuente, relleno, margen, etc.
• Cree una función usando JavaScript en la etiqueta del script para mostrar solo una reseña a la vez.

Ejemplo: Cree un carrusel de reseñas utilizando el enfoque anterior.

Código HTML: como en los dos primeros pasos, crearemos una etiqueta div anidada y dos botones en la etiqueta del cuerpo .

<div class="review">
    <div class="review__items">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        <h1>GeeksforGeeks</h1>
  
        <p>
            Let's learn to create a review 
            carousel using JavaScript.
        </p>
    </div>
  
    <div class="review__items">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png" />
        <h1>Geek Here</h1>
  
        <p>
            Very useful site to learn cool 
            stuff. Improve your skills
        </p>
    </div>
  
    <div class="review__items">
        <img src=
"https://media.geeksforgeeks.org/img-practice/courses/GfG_Logo.png" />
        <h1>Hello there!</h1>
  
        <p>
            Have a nice day, Please visit 
            us again. Nice to meet you.
        </p>
    </div>
  
    <div class="review__button">
        <button id="prev" onclick="previousReview()">
            PREV
        </button>
          
        <button id="next" onclick="nextReview()">
            NEXT
        </button>
    </div>
</div>

Nota: en la etiqueta del botón, hemos especificado un atributo onclick . El atributo de evento onclick funciona cuando el usuario hace clic en el botón. Ejecutará la función cuando se haga clic en el botón.

Código CSS: para el estilo, hemos utilizado las propiedades CSS.

.review {
    background: rgb(145, 226, 188);
    height: auto;
    width: 270px;
    border-radius: 15px;
    margin: auto;
    padding: 10px;
    margin-top: 30px;
    box-shadow: 5px 5px 5px #32917d;
    align-items: center;
}
  
.review__items {
    align-items: center;
    justify-content: space-evenly;
    width: 250px;
    padding: 10px;
    align-items: center;
}
  
.review__items img {
    height: 250px;
    width: 250px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 15px;
}
  
.review__items h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
}
  
.review__items p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
}
  
.review__button {
    text-align: center;
    padding: 10px;
}
  
.review__button button {
    color: rgb(192, 229, 192);
    background: green;
    font-weight: bold;
}
  
.review__items {
    display: none;
}

Nota: También podemos crear otro archivo para diseñar o podemos agregarlos en el mismo archivo HTML bajo la etiqueta de estilo. 

Ahora, para mostrar solo una revisión a la vez, crearemos algunas funciones en JavaScript.

Función de carrusel : esta función obtiene todos los elementos utilizando el nombre de clase especificado como un objeto con la ayuda del método getElementsByClassName() . A estos objetos se puede acceder por el índice de los elementos. Esta función recibe un parámetro, que es el índice del elemento que mostrará.

function carousel(review) {
    let reviews = document.getElementsByClassName("review__items");

    if(review>=reviews.length){
        review=0;
        rev=0;
    }
    if(review<0){
        review=reviews.length-1;
        rev=reviews.length-1;
    }
    for (let i = 0; i < reviews.length; i++) {
      reviews[i].style.display = "none";
    }
    reviews[review].style.display="block";
}

Para mostrar el índice especificado, en primer lugar, ocultará todas las reseñas configurando su visualización en ninguno mediante un bucle for simple y, para un índice específico, mostrará información configurando su visualización en bloque. 

Nota: Las declaraciones condicionales son responsables de la forma cíclica del carrusel, si el parámetro es negativo, establecerá el parámetro en el último índice, y si el parámetro es mayor o igual que el último índice, establecerá el parámetro en el primero. índice.

Función anteriorReview : Esta función se ejecutará cuando se haga clic en el botón anterior, disminuye la variable en 1, luego se pasará a la función carrusel.

function previousReview() {
    rev = rev - 1;
    carousel(rev);
}

función nextReview: esta función se ejecutará cuando se haga clic en el botón siguiente, aumenta la variable en 1, luego se pasará a la función carrusel.

function nextReview() {
    rev = rev + 1;
    carousel(rev);
}

Código completo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Review Carousel</title>
  
    <style>
        .review {
            background: rgb(145, 226, 188);
            height: auto;
            width: 270px;
            border-radius: 15px;
            margin: auto;
            padding: 10px;
            margin-top: 30px;
            box-shadow: 5px 5px 5px #32917d;
            align-items: center;
        }
          
        .review__items {
            align-items: center;
            justify-content: space-evenly;
            width: 250px;
            padding: 10px;
            align-items: center;
        }
          
        .review__items img {
            height: 250px;
            width: 250px;
            border-radius: 5px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 15px;
        }
          
        .review__items h1 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 20px;
        }
          
        .review__items p {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 14px;
        }
          
        .review__button {
            text-align: center;
            padding: 10px;
        }
          
        .review__button button {
            color: rgb(192, 229, 192);
            background: green;
            font-weight: bold;
        }
          
        .review__items {
            display: none;
        }
    </style>
</head>
  
<body>
    <div class="review">
        <div class="review__items">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
            <h1>GeeksforGeeks</h1>
            <p>
                Let's learn to create a review 
                carousel using JavaScript.
            </p>
  
        </div>
  
        <div class="review__items">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png" />
            <h1>Geek Here</h1>
            <p>
                Very useful site to learn cool 
                stuff. Improve your skills.
            </p>
  
        </div>
  
        <div class="review__items">
            <img src=
"https://media.geeksforgeeks.org/img-practice/courses/GfG_Logo.png" />
            <h1>Hello there!</h1>
            <p>
                Have a nice day, Please visit 
                us again. Nice to meet you
            <p>
        </div>
  
        <div class="review__button">
            <button id="prev" onclick="previousReview()">
                PREV
            </button>
              
            <button id="next" onclick="nextReview()">
                NEXT
            </button>
        </div>
    </div>
  
    <script>
        let rev = 0;
        carousel(rev);
  
        function previousReview() {
            rev = rev - 1;
            carousel(rev);
        }
  
        function nextReview() {
            rev = rev + 1;
            carousel(rev);
        }
  
        function carousel(review) {
            let reviews = document
                .getElementsByClassName("review__items");
  
            if (review >= reviews.length) {
                review = 0;
                rev = 0;
            }
            if (review < 0) {
                review = reviews.length - 1;
                rev = reviews.length - 1;
            }
            for (let i = 0; i < reviews.length; i++) {
                reviews[i].style.display = "none";
            }
            reviews[review].style.display = "block";
        }
    </script>
</body>
  
</html>

Producción: