Cómo crear un control deslizante de imágenes con JavaScript para mejorar su sitio web

Comparte en redes sociales

¿Alguna vez te has encontrado en una situación en la que querías mostrar múltiples imágenes/videos en una sección de una página web pero no querías ocupar mucho espacio? ¿Quieres añadir interactividad a tus páginas web o hacerlas más atractivas?

Un control deslizante de imagen puede ahorrarle la lucha. En este artículo, definiremos un control deslizante de imagen, los requisitos previos para crear un control deslizante de imagen y cómo crear uno usando HTML, JavaScript y CSS.

¿Qué es un control deslizante de imagen?

Los controles deslizantes son carruseles o presentaciones de diapositivas que muestran texto, imágenes o videos. Este artículo se centrará en los controles deslizantes de imágenes. La mayoría de los desarrolladores web utilizan controles deslizantes en la página de inicio para mostrar las ofertas o la información más importante.

Aquí hay algunas razones por las que debería usar controles deslizantes en sus páginas web.

Mejorar la experiencia del usuario: Una página web ideal debe ser compacta para que los usuarios finales no tengan que desplazarse y desplazarse para obtener datos importantes. Si tiene varias imágenes, puede evitar que los usuarios tengan que desplazarse por ellas mostrándolas en un control deslizante.
Atractivo visual: La mayoría de los usuarios de sitios web no pasarán mucho tiempo en una página web simple. Puede mejorar el atractivo visual con controles deslizantes y animaciones.
Ahorra espacio: Si tiene alrededor de 20 imágenes que desea mostrar en su página web, pueden ocupar mucho espacio. La creación de un control deslizante le ahorrará espacio y permitirá a los usuarios acceder a cada uno de ellos.
Mostrar contenido dinámico: Puede usar controles deslizantes para mostrar contenido dinámico, como integraciones de redes sociales, blogs y noticias.

Requisitos previos para crear un control deslizante de imagen

Una comprensión básica de HTML: Describiremos aquí la estructura del control deslizante. Debe sentirse cómodo con varias etiquetas HTML, clases y divs.
Una comprensión básica de CSS: Usaremos CSS para diseñar los controles deslizantes y botones de nuestra imagen.
Una comprensión básica de JavaScript: Usaremos JavaScript para hacer que los controles deslizantes de la imagen respondan.
Un editor de código: Puede utilizar el editor de código de su elección. Voy a utilizar código de estudio visual.
Una colección de imágenes.

Configurar carpeta de proyecto

Necesitamos una carpeta de proyecto, una carpeta de imágenes dentro y archivos HTML, CSS y JavaScript. Llamaré a mi proyecto «Image-Slider». Puede crear su proyecto manualmente o usar estos comandos para comenzar;

mkdir Image-Slider

cd Image-Slider

mkdir Images && touch index.html styles.css script.js

Agregue todas sus imágenes a la carpeta «Imágenes» que creamos en la carpeta del proyecto y continúe con el siguiente paso.

Esta es la carpeta de mi proyecto, donde agregué seis imágenes que usaré para crear un control deslizante. Todo nuestro código HTML estará en el index.html archivar.

Tipos de control deslizante de imagen

Podemos tener dos tipos de deslizadores de imágenes; un control deslizante automático y un control deslizante de imagen automático con botones.

#1. Deslizador de imagen automático

Un control deslizante automático se desplaza automáticamente al siguiente cuadro después de un tiempo determinado, digamos, por ejemplo, 3 segundos.

Código HTML

Este es mi código HTML;

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>

<body>
  <div id="slider">
    <div class="slide">
        <h1>African</h1>
      <img src="Images/img1.jpg" alt="Image 1">
    </div>
    <div class="slide">
        <h1>American</h1>
      <img src="Images/img2.jpg" alt="Image 2">
    </div>
    <div class="slide">
        <h1>Asian</h1>
      <img src="Images/img3.jpg" alt="Image 3">
    </div>
    <div class="slide">
        <h1>Arabic</h1>
      <img src="Images/img4.jpg" alt="Image 4">
    </div>
    <div class="slide">
        <h1>Modern </h1>
      <img src="Images/img5.jpg" alt="Image 5">
    </div>
    <div class="slide">
        <h1> European </h1>
      <img src="Images/img6.jpg" alt="Image 6">
    </div>
  </div>

  <script src="script.js"></script>


</body>
</html>

De este código podemos notar lo siguiente;

Importé mi archivo CSS a index.html en el <head> sección. Esto se usará en pasos posteriores.

Leer también Supercharge Your Marketing Strategy with Freshmarketer

<link rel="stylesheet" href="styles.css">

Agregué JavaScript a mi HTML justo antes de cerrar <body> etiqueta. Usaré JavaScript para agregar funcionalidad a los controles deslizantes.
Cada diapositiva tiene un class de slide.
usé el <img> etiqueta para importar imágenes desde la carpeta Imágenes.

Dale estilo al control deslizante de imagen automático usando CSS

Ahora podemos diseñar nuestras imágenes ya que ya hemos vinculado los archivos CSS y HTML.

Agregue este código a su archivo CSS;

#slider {
    width: 80%;
  }
  
  .slide {
    width: 80%;
    display: none;
    position: relative;
  }
  
  .slide img {
    width: 80%;
    height: 80%;
  }
  
  .slide.active {
    display: block;
  }

De este código podemos notar lo siguiente;

tenemos el width Y height de nuestro control deslizante al 80%
Configuramos la diapositiva activa en blocklo que significa que solo se mostrará la diapositiva activa mientras que las demás estarán ocultas.

Cómo agregar JavaScript para que el control deslizante de imágenes responda

Agrega este código a tu script.js archivar;

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
  slides[currentSlide].className = 'slide';
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className = 'slide active';
}

Este JavaScript hace lo siguiente;

Utilizamos document.querySelectorAll selector para apuntar a todos los elementos con una clase de slide.
damos el currentSlide 0 valor inicial.
Arreglamos el slideInterval como 2000 (2 segundos), lo que significa que los marcos del cursor cambian cada 2 segundos.
este codigo slides[currentSlide].className = 'slide'; elimina la clase activa de la diapositiva actual
este codigo currentSlide = (currentSlide + 1) % slides.length; incrementa el índice de la diapositiva actual.
este codigo slides[currentSlide].className = 'slide active'; agrega la clase activa a la diapositiva actual.

El cursor automático funciona de la siguiente manera;

#2. Control deslizante automático con botones

El control deslizante de imagen que creamos se desplaza automáticamente cada 2 segundos. Ahora podemos crear una imagen donde los usuarios pueden avanzar a la siguiente diapositiva haciendo clic en un botón o desplazarse automáticamente cada 3 segundos si el usuario no hace clic en los botones.

Código HTML

Puede editar el contenido de su index.html archivo de la siguiente manera;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Slider</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">

        <div class="mySlides">
            <img src="Images/img1.jpg" style="width:100% ; height:50vh" >
        </div>
      
        <div class="mySlides">
            <img src="Images/img2.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img3.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img4.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img5.jpg" style="width:100% ; height:50vh">
        </div>
      
      
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
      
        <div class="caption-container">
          <p id="caption"></p>
        </div>
      
        <div class="row">
          <div class="column">
            <img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" alt="European">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" alt="African">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" alt="American">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Asian">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Modern">
          </div>
          
        </div>
      </div>

    <script src="script.js"></script>
  </body>
</html>

Este código HTML funciona de la siguiente manera;

Tenemos una clase llamada mySlides que lleva nuestras cinco imágenes.
Tenemos dos botones, «anterior» y «siguiente» con un onClickpermitiendo a los usuarios desplazarse por las diapositivas.
Tenemos una miniatura que muestra las imágenes en la parte inferior de la página web.

Leer también 16 Best Cloud Accounting Software for Small to Big Businesses [2023]

codigos css

Agregue esto a su código;

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.mySlides {
  justify-content: center;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgb(34, 143, 85);
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
  text-align: center;
  background-color: orangered;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

El código CSS funciona de la siguiente manera;

Arreglamos el .mySlides establezca la propiedad de visualización en ninguno, lo que significa que todas las diapositivas están ocultas de forma predeterminada.
Establecemos la opacidad de las miniaturas flotantes en 1 a través del recurso, .demo:hover {opacity: 1;} regla.

código JavaScript

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

let slideInterval = setInterval(() => {
  plusSlides(1);
}, 3000);

let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

slideshowContainer.addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    plusSlides(1);
  }, 3000);
});

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

Puede obtener el código fuente final aquí.

Nuestro código JavaScript hace lo siguiente;

Tenemos un currentSlide función con el valor de visualización establecido en ninguno. Esta regla permite que nuestra página web muestre solo la diapositiva actual.
Tenemos un plusSlides función que suma/resta el valor dado de slideIndex para determinar qué diapositiva mostrar.
Si el usuario no hace clic en los botones, las diapositivas se desplazan automáticamente cada 3000 milisegundos.

Si un usuario está usando la pestaña de navegación, nuestro control deslizante de imágenes funcionará de la siguiente manera;

Si el usuario no utiliza los botones de navegación, el control deslizante de la imagen se desplaza automáticamente cada 3 segundos de la siguiente manera;

Probar y depurar el control deslizante de imágenes

Los errores y errores son parte del viaje de un desarrollador, y tenerlos en su código no significa que sea un mal desarrollador. Si su código no funciona incluso después de seguir los pasos mencionados anteriormente, puede probar estas opciones de prueba y depuración para corregir los errores:

Depure cada archivo por separado: Nuestro código tiene tres archivos, HTML, CSS y JavaScript. Los tres idiomas tienen reglas diferentes. Puede verificar si sus códigos HTML, CSS y JavaScript son válidos usando herramientas como Servicio de validación de marcado W3C para HTML, Validador de CSS para su código CSS, y Herramientas para desarrolladores de Chrome para probar su código JavaScript.
Realiza diferentes tipos de pruebas: Puede realizar pruebas visuales para asegurarse de que las imágenes se muestren correctamente, pruebas de rendimiento para comprobar si las imágenes responden y pruebas funcionales para asegurarse de que las imágenes son navegables.
Pruebe su código con diferentes formatos y tamaños de imagen: Un buen control deslizante de imagen debería funcionar con diferentes formatos y tamaños de imagen.
Automatice sus pruebas: La automatización está en todas partes y usted también puede beneficiarse de ella al realizar pruebas. Puedes usar herramientas como Selenium o Corredor de carga para escribir y ejecutar scripts de automatización de pruebas. Estas herramientas también le permiten reutilizar algunas de sus pruebas.
Documente sus pruebas: La prueba es un proceso continuo. Es posible que deba seguir mejorando sus pruebas hasta que su código funcione como se espera. Documente este proceso para que su código sea legible y fácil de consultar.

Leer también COTU Ventures de Dubai lanza un fondo de 54 millones de dólares para nuevas empresas con sede en MENA

Deslizadores de imágenes: mejores prácticas

Mantenlo simple: Los controles deslizantes son atractivos. Sin embargo, mantenga el recuento de fotogramas en un control deslizante bajo. Algo así como 4-7 imágenes por diapositiva es ideal.
Pruebe sus controles deslizantes: Pruebe su funcionalidad antes de publicarlos en línea.
Crear cursores sensibles: Asegúrese de que sus controles deslizantes creados respondan a diferentes tamaños de pantalla.
Usa imágenes de alta calidad: Tome/cargue imágenes de alta calidad para sus controles deslizantes. Guardar sus imágenes como SVG es un gran enfoque porque no pierden calidad cuando las cambia de tamaño.
Cambia el tamaño de tus imágenes: Puede tener diferentes tamaños y formatos de imagen. Siempre asegúrese de que las imágenes en un control deslizante tengan el mismo tamaño. Puede lograr esto a través de CSS.

Envoltura

Esperamos que ahora pueda crear un control deslizante de imagen completamente funcional para mostrar datos importantes en su sitio web sin usar marcos de interfaz de usuario. Puede usar el mismo enfoque para crear controles deslizantes de video en páginas web.

Source link

Si quiere puede hacernos una donación por el trabajo que hacemos, lo apreciaremos mucho.

Direcciones de Billetera:

- BTC: 14xsuQRtT3Abek4zgDWZxJXs9VRdwxyPUS

- USDT: TQmV9FyrcpeaZMro3M1yeEHnNjv7xKZDNe

- BNB: 0x2fdb9034507b6d505d351a6f59d877040d0edb0f

- DOGE: D5SZesmFQGYVkE5trYYLF8hNPBgXgYcmrx

También puede seguirnos en nuestras Redes sociales para mantenerse al tanto de los últimos post de la web:

-Twitter

- Telegram

Disclaimer: En Cryptoshitcompra.com no nos hacemos responsables de ninguna inversión de ningún visitante, nosotros simplemente damos información sobre Tokens, juegos NFT y criptomonedas, no recomendamos inversiones

Cómo crear un control deslizante de imágenes con JavaScript para mejorar su sitio web

¿Qué es un control deslizante de imagen?

Requisitos previos para crear un control deslizante de imagen

Configurar carpeta de proyecto

Tipos de control deslizante de imagen

#1. Deslizador de imagen automático

Código HTML

Dale estilo al control deslizante de imagen automático usando CSS

Cómo agregar JavaScript para que el control deslizante de imágenes responda

#2. Control deslizante automático con botones

Código HTML

codigos css

código JavaScript

Probar y depurar el control deslizante de imágenes

Deslizadores de imágenes: mejores prácticas

Envoltura

Artículos relacionados:

Dejar un comentario Cancelar la respuesta