Control deslizante infinito táctil en Vanilla JavaScript

Vista prévia

Descripción

Una biblioteca de JavaScript independiente para crear un deslizador de secuencia de imágenes de imagen táctil automático y adaptable .

Puede deslizarse a través de las imágenes con el ratón arrastrar o toque deslizar.

Funcionamiento

Cargue la hoja de estilos ' Slider-JS. css ' en el documento que proporciona el estilo básico para el control deslizante. La forma de estilo de la navegación & controles de paginación depende de usted.

<link rel="stylesheet" href="css/slider-js.css">

Cargue el JavaScript principal ' Slider-JS. js ' al final del documento.

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

Agregue imágenes y controles deslizantes a la Página Web. Atributos de datos HTML disponibles:

• Data-width: ancho del deslizador
• Data-idBegin: diapositiva inicial
• Data-duración: duración de la animación
• retardo de datos: retardo de transición

<div class="sliderjs" data-width="100%" data-idBegin="0" data-duration="400" data-delay="2000">

<div class="sliderjs-viewport">


<ul class="sliderjs-canvas">



<li><img src="1.jpg" alt="Image Slider 1"></li>



<li><img src="2.jpg" alt="Image Slider 2"></li>



<li><img src="3.jpg" alt="Image Slider 3"></li>



<li><img src="4.jpg" alt="Image Slider 4"></li>



<li><img src="5.jpg" alt="Image Slider 5"></li>


</ul>

</div>

<ul class="sliderjs-pag">


<li>slide 1</li>


<li>slide 2</li>


<li>slide 3</li>


<li>slide 4</li>


<li>slide 5</li>

</ul>

<ul class="sliderjs-nav">


<li class="sliderjs-prev">Previous</li>


<li class="sliderjs-next">Next</li>

</ul>
</div>

Aplique sus propios estilos a los controles de navegación y paginación.