Cómo crear un control deslizante de imagen usando JavaScript

Un DiapositivaR que comprende varias imágenes que se muestran en una aplicación web se llama "Diapositivas" y "Carrueles". Le permite mostrar múltiples imágenes, videos o gráficos en una aplicación web. Además, agregar un control deslizante de imágenes a un sitio web puede fascinar a los usuarios y captar su atención.

Siendo un desarrollador de JavaScript, si se le pide que cree un control deslizante de imágenes para una aplicación web, pensará rápidamente en emplear "complementos jQuery". Estos complementos son útiles; Sin embargo, pueden encontrar conflictos de código con bibliotecas existentes y bibliotecas jQuery. Entonces, qué hacer en este escenario? En lugar de usar jQuery, utilice JavaScript y cree un control deslizante de imagen sin problemas.

Este artículo enseñará el procedimiento de creación un control deslizante en JavaScript. Entonces, comencemos!

Cómo crear un control deslizante de imagen usando JavaScript

Para crear un control deslizante de imágenes usando JavaScript, debe seguir las instrucciones de mudanza a continuación:

Paso 1: Subir deseado imágenes a la carpeta del proyecto.
Paso 2: Agregar requerido Elementos html hacia "índice.html" archivo.
Paso 3: Definir lógica En el archivo JavaScript.
Etapa 4: Selecciona el estilo del elemento HTML agregado en el "estilo.CSS" archivo.

Según los pasos mencionados, ahora pasaremos por el procedimiento de crear un control deslizante de imágenes usando JavaScript.

Nota: Para el propósito de demostración, estamos utilizando el código Visual Studio. Sin embargo, puede utilizar cualquier editor de código de su elección.

Paso 1: Cargue las imágenes deseadas en el proyecto

En su proyecto, cree una nueva carpeta llamada "imágenes"Y agregue las imágenes deseadas para las que desea crear un control deslizante de imágenes.

Por ejemplo, en nuestro "Control deslizante"Carpeta del proyecto, hemos creado una"imágenes"Carpeta y luego le agregó tres imágenes:"IMG1.JPG","IMG2.JPG", y "IMG3.JPG":

Paso 2: Agregue los elementos HTML requeridos al "índice.archivo html "

En el "índice.html"Archivo, agregaremos un contenedor"desplazamiento de imágenes" utilizando el "" etiqueta. Este contenedor se divide aún más en las tres secciones de diapositivas de imagen.

Junto con las diapositivas de imágenes especificadas, también agregaremos dos símbolos HTML con la ayuda del ""Etiqueta de anclaje. El "<"El símbolo nos llevará al"anterior"Diapositiva, mientras que el segundo símbolo">"Se desliza al"próximo" imagen:

❮
❯

Así es como nuestro "índice.html"El archivo se parece:

Paso 3: Defina la lógica en el archivo JavaScript

Tenemos que definir la lógica en el "proyecto.js"Archivo de tal manera que cuando el control deslizante de la imagen se carga por primera vez, muestra la primera imagen en el control deslizante. Después de eso, nos permite avanzar entre las diapositivas utilizando los símbolos HTML anteriores y anteriores.

Para hacerlo, en primer lugar, estableceremos "1"Como el"CurrentIndex"De diapositivas y pasarlo al"DisplaySlides ()" función:

var currentIndex = 1;
DisplaySlides (CurrentIndex);

El "DisplaySlides ()"La función acepta el"CurrentIndex"Valor como argumento"numer". En el primer paso, esta función obtiene todos los elementos con el nombre de la clase "imágenes de imágenes".

Entonces, agregaremos un "si" condición "Número> Diapositivas.longitud"Eso verifica si el valor del"numer"El argumento es mayor que la longitud de las diapositivas"3". Tenga en cuenta que el "numer"El valor se refiere al"CurrentIndex"De las diapositivas. En caso de que la condición especificada se evalúa como "verdadero", el "CurrentIndex"Del control deslizante se establecerá en"1". Esta condición se aplicará en la situación donde se muestra la última imagen (diapositiva 3) y el usuario hace clic en el "próximo" botón. Al hacerlo, el control deslizante establecerá el "primero"Imagen (diapositiva 1) en la presentación de diapositivas.

Del mismo modo, el segundo "si" condición "numer < 1 "Se evaluará como verdadero, cuando la primera imagen (diapositiva 1) se muestra en la presentación de diapositivas y el usuario hace clic en el" "anterior" botón. En este caso, el valor del "CurrentIndex"Está configurado como"3"Que es igual al control deslizante"longitud"Y la última imagen (diapositiva 3) se mostrará en la presentación de diapositivas.

Además, cuando se selecciona una diapositiva para mostrar usando su "CurrentIndex", La visualización del estilo de las otras dos diapositivas se establecerá en"ninguno":

función displayslides (num)
var x;
DIBULSAS DE VAR = documento.getElementsByClassName ("Imageslides");
if (num> diapositivas.longitud) currentIndex = 1
if (num < 1) currentIndex = slides.length
para (x = 0; x < slides.length; x++)
diapositivas [x].estilo.display = "Ninguno";

Diapositivas [CurrentIndex - 1].estilo.display = "bloque";

En el control deslizante de la imagen, cuando hacemos clic en (próximo) ">"Símbolo HTML", "1"Se pasa como un argumento al"setslides ()"Función que significa que el control deslizante tiene que moverse a la siguiente diapositiva. Para este propósito, el "setslides ()"Invoca"DisplaySlides ()"Función mientras pasa"CurrentIndex += num"Como argumento. Esta operación se incrementará "1" en el "CurrentIndex"Valor y luego muestre esa imagen específica en la presentación de diapositivas.

En el otro caso, cuando (anterior) "<"Se hace clic en el símbolo, un"-1"Se pasa el valor al"DisplaySlides ()Método "para mostrar la imagen anterior en el control deslizante:

funciones setslides (num)
DisplaySlides (CurrentIndex += num);

Paso 4: Establezca el estilo del elemento HTML agregado en el "estilo.archivo de CSS "

A continuación, agregue el código dado a continuación en el "estilo.CSSArchivo para especificar el estilo de los elementos HTML agregados:

.Imageslides
Pantalla: ninguno

img
margen: auto;
bloqueo de pantalla;
Ancho: 100%;

/ * Nuestro contenedor principal de imágenes de imágenes */
.Images-slideshow
MAX-ANCHO: 612PX;
Posición: relativo;
margen: auto;

/*Estilo para ">" Next y "<" previous buttons */
.Slider-BTN
cursor: puntero;
Posición: Absoluto;
arriba: 50%;
Ancho: Auto;
relleno: 8px 16px;
margen -top: -22px;
Color: RGB (0, 0, 0);
Font-Weight: Bold;
tamaño de fuente: 18px;
Transición: 0.6s facilidad;
Border-Radius: 0 3px 3px 0;
Usuario-selección: ninguno;
Color de fondo: RGBA (255, 255, 255, 0.5);
Radio fronterizo: 50%;

/ * Configuración de la posición del botón anterior hacia la izquierda */
.anterior
Izquierda: 2%;

/ * Configuración de la posición del botón siguiente hacia la derecha */
.próximo
Derecha: 2%;

/ * En el flotador, agregando un color de fondo */
.Anterior: flotante,
.Siguiente: Hover
Color: RGB (255, 253, 253);
Color de fondo: RGBA (0, 0, 0, 0.8);

Después de guardar el código agregado, abra el "índice.htmlArchivo "en el navegador y consulte el trabajo deslizante de imagen creado:

Eso se trataba de crear un control deslizante de imagen básico usando JavaScript. Puede investigar más a fondo para agregar alguna variación en el control deslizante de imágenes.

Conclusión

En lugar de utilizar complementos jQuery, creando un Imagen Slider usando JavaScript se considera una de las mejores opciones. Toma menos tiempo para la implementación y garantiza que no existan errores ni conflictos. Un control deslizante de imágenes también hace que una página web sea más innovadora y captura la atención de los usuarios. Este artículo sobre el procedimiento para crear un control deslizante de imágenes en JavaScript.