¿Cómo ocultar y mostrar flechas de diapositivas en un control deslizante elegante?

En esta publicación, crearemos un control deslizante elegante y más adelante le mostraremos cómo mostrar/ocultar los botones del control deslizante deslizante.
Para crear un control deslizante elegante, simplemente declare muchos elementos con el mismo nombre de clase.

Ejemplo:

<!DOCTYPE html>
<html>
    <body>
        <div>
            <img class="mySlides" 
                 width="33%" 
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png" 
                 alt="" 
                 width="300"
                 height="83" 
                 class="alignnone 
                        size-medium wp-image-2098786" />
            <img class="mySlides" 
                 width="33%" 
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101453/267-300x83.png" 
                 alt="" 
                 width="300" 
                 height="83" 
                 class="alignnone
                        size-medium wp-image-2098787" />
            <img class="mySlides"
                 width="33%"
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png" 
                 alt="" 
                 width="300" 
                 height="83" 
                 class="alignnone 
                        size-medium wp-image-2098786" />
        </div>
    </body>
</html>

Producción:

Ahora, solo agregue dos botones en las esquinas izquierda y derecha para deslizar las imágenes usando HTML y declare un método onClick para cambiar el
índice de la imagen mostrada usando JavaScript.

Ejemplo:

<!DOCTYPE html>
<html>
    <body>
        <div>
            <img class="mySlides" 
                 width="33%" 
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png" 
                 alt="" 
                 width="300"
                 height="83" 
                 class="alignnone 
                        size-medium wp-image-2098786" />
            <img class="mySlides" 
                 width="33%" 
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101453/267-300x83.png" 
                 alt="" 
                 width="300" 
                 height="83" 
                 class="alignnone
                        size-medium wp-image-2098787" />
            <img class="mySlides"
                 width="33%"
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png" 
                 alt="" 
                 width="300" 
                 height="83" 
                 class="alignnone 
                        size-medium wp-image-2098786" />
            <button onclick="plusDivs(-1)">❮</button>
            <button onclick="plusDivs(1)">❯</button>
        </div>
<script>
    var slideIndex = 1;
    showDivs(slideIndex);
  
    function plusDivs(n) {
        showDivs((slideIndex += n));
    }
  
    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {
            slideIndex = 1;
        }
        if (n < 1) {
            slideIndex = x.length;
        }
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex - 1].style.display = "block";
    }
</script>
  
    </body>
</html>

Producción:

Explicación del código JavaScript:
al cargar el script por primera vez, el índice de diapositivas se establecerá en 1 (primera imagen) y cuando el usuario haga clic en cualquiera de los botones,
el índice de diapositivas aumentará o disminuirá según esto. Y se mostrará la imagen. Mostrar = «ninguno» ocultará las imágenes y
mostrar = «bloquear» volverá a mostrar las imágenes.

Ocultar los botones:
para ocultar los botones, puede eliminar estas dos líneas:

" button onclick="plusDivs(-1)">&#10094 button"
" button onclick="plusDivs(1)">&#10095 button"

Y en lugar de llamar al script usando onClick, use la función setTimeout(function_name, time_in_ms) para llamar automáticamente a la función
en el tiempo establecido.

Ejemplo:

<!DOCTYPE html>
<html>
    <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        .mySlides {
            display: none;
        }
    </style>
  
    <body>
        <div>
            <img class="mySlides"
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
                 alt="" 
                 width="300" 
                 height="83" 
                 class="alignnone 
                        size-medium 
                        wp-image-2098786" />
            <img class="mySlides" 
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101453/267-300x83.png" 
                 alt="" 
                 width="300" 
                 height="83" 
                 class="alignnone 
                        size-medium
                        wp-image-2098787" />
            <img class="mySlides" 
                 src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png" 
                 alt=""
                 width="300"
                 height="83" 
                 class="alignnone 
                        size-medium 
                        wp-image-2098786" />
        </div>
  
        <script>
            var slideIndex = 0;
            showDivs();
  
            function showDivs() {
                var i;
                var x = document.getElementsByClassName("mySlides");
                slideIndex++;
                if (slideIndex > x.length) {
                    slideIndex = 1;
                }
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                x[slideIndex - 1].style.display = "block";
                setTimeout(showDivs, 2000);
            }
        </script>
    </body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por samrat2825 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 *