Carrusel de imágenes compatible con dispositivos móviles mínimos: deslizador ligero

Vista prévia

Descripción

Este es un deslizador/carrusel de imagen ligero, adaptable, automático y amigable para móviles escrito en JavaScript puro.

El carrusel se desvanece automáticamente a través de las imágenes en un intervalo determinado.

Para realizar una transición manual entre imágenes, simplemente haga clic/toque en los lados del control deslizante.

Funcionamiento

Cargue la versión minimizada de la biblioteca de slider ligero en el documento.

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

La estructura HTML para el deslizador/carrusel. Puede personalizar el deslizador/carrusel con los siguientes atributos de datos HTML.

• Data-height: altura del deslizador/carrusel
• Data-width: ancho del deslizador/carrusel
• Data-Slide: velocidad de transición en MS
• Data-autoslide: intervalo de reproducción automática

<div class="banner" data-height="600" data-width="100%" data-slide-speed="900" data-autoslide="5000">

<img src="https://picsum.photos/1200/600/?random" class="slider">

<img src="https://picsum.photos/1300/600/?random" class="slider">

<img src="https://picsum.photos/1400/600/?random" 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>