Deslizador de imagen altamente personalizable en Vanilla JavaScript-NdotSlider

Vista prévia

Descripción

NdotSlider es una librería JavaScript independiente de vainilla para crear un deslizador de imagen adaptable y automático con controles deslizantes altamente personalizables y efectos de transición.

¿Cómo funciona?

Descargue e inserte la última versión de la biblioteca NdotSlider en el documento.

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

Inserte un grupo de imágenes en el contenedor deslizante como esta:

<div class="ndot-slider">

<img src="1.jpg">

<img src="2.jpg">

<img src="3.jpg">

...
</div>

Inicialice el NdotSlider y ya está.

NdotSlider.start();

Para config el deslizador, simplemente pase los parámetros como un objeto al atributo ' Data-ndotslider ':

• color: "naranja" – el color del tema para el deslizador
• Tamaño: "contener" – tamaños de imagen. [Cover | contiene | strech]
• autoPlay: false – automaticaly reproducir las diapositivas. [true | false]
• autoPlayButton: false – botón crear reproducción/pausa. [true | Flase]
• Duración: 5000 – con reproducción automática en el tiempo en milisegundos hasta la siguiente diapositiva.
• Loop: false – permitir bucles en la última y primera diapositiva.
• Preview: true – vista previa de compilación. [true | Flase]
• previewSpan: true – vista previa. [false = thumbnails | true = palmos]
• previewButton: false – compilar Mostrar vista previa/ocultar vista previa botón. [true | Flase]
• botones : true – botones crear siguiente/anterior. [true | Flase]
• animación: "Slide" – el nombre de la animación que se utilizará.
• fullscreenButton: false – botón crear pantalla completa. [true | Flase]
• animationDuration: 600 – la duración de la animación en milisegundos. 0 < valor < 15000. Si no se cumple esta condición, se reserva el valor predeterminado.
• animationTiming: [0,5, 0, 0, 1] – su función de temporización para las animaciones. [AX, ay, BX, by], 0 < = AX, BX < = 1. Si alguna de estas condiciones no se cumplen, se reserva a los valores predeterminados. No utilice números como .24 JSON no le gusta eso, en su lugar, utilice 0,24.

<div class="ndot-slider"



data-ndotslider='{



"previewSpan": true,



"previewButton": true,



"fullscreenButton": true,



"autoPlayButton": true,



"duration": 2000,



"size": "contain",



"animationDuration": 600,



"animationTiming": [0.4, -0.4, 0.6, 1],



"animation": "slide"



}'>

<img src="1.jpg">

<img src="2.jpg">

<img src="3.jpg">

...
</div>