Deslizador de imagen adaptable mínimo en Vanilla JavaScript

Vista prévia

Descripción

Una librería de slider JavaScript muy simple que se utiliza para generar un deslizador de imagen de rotación automática, totalmente adaptable/< a href = "https://wikicss.com/tag/carousel/" > Carousel con controles de paginación/navegación personalizados.

Funcionamiento

Descargue e inserte el script Slider. js en el documento HTML.

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

Agregue imágenes y controles de paginación/navegación al contenedor deslizante.

<div class="banner">

<img src="1.jpg" class="slider">

<img src="2.jpg" class="slider">

<img src="3.jpg" class="slider">


<div class="previous" data-previous-cursor="left.png"></div>

<div class="next" data-next-cursor="right.png"></div>


<div class="links">



<a href="1"></a>



<a href="2"></a>



<a href="3"></a>

</div>
</div>

Configuración del control deslizante con los siguientes atributos de "datos":

• Data-height: altura del deslizador
• Data-width: ancho del deslizador
• velocidad de deslizamiento de datos: velocidad de animación
• Data-autoslide: intervalo de reproducción automática
• Data-Next-cursor: indicador siguiente
• Data-Previous-cursor: indicador de previsualización

<div class="banner"



data-height="600"



data-width="100%"



data-slide-speed="900"



data-autoslide="5000">

<img src="1.jpg" class="slider">

<img src="2.jpg" class="slider">

<img src="3.jpg" class="slider">


<div class="previous" data-previous-cursor="left.png"></div>

<div class="next" data-next-cursor="right.png"></div>


<div class="links">



<a href="1"></a>



<a href="2"></a>



<a href="3"></a>

</div>
</div>

Registro de cambios

10/09/2018

• Bugfix