Deslizador de carrusel táctil con Pure JavaScript-zSlider

Vista prévia

Descripción

zSlider es una librería JavaScript pura que toma una lista de elementos HTML y luego los convierte en un deslizador de carrusel sensible al tacto.

Más características

• Deslizamiento automático al inicializar.
• Permite deslizarse a través de elementos HTML a través de arrastrar el ratón o toque deslizar.
• Velocidad de transición y retardo personalizados.

Funcionamiento

Descargue el zSlider, descomprímalo e incluya el zSlider. CSS y zSlider. js en la Página Web.

<link rel="stylesheet" href="styles/zSlider.css">
<script src="scripts/zSlider.js"></script>

Crea una lista de contenido HTML que desees deslizar.

<div class="z-slide-wrap" id="demo">

<ul class="z-slide-content">



<li class="z-slide-item">





Slide 1



</li>



<li class="z-slide-item">





Slide 2



</li>



<li class="z-slide-item">





Slide 3



</li>

</ul>
</div>

Cree una nueva instancia del control deslizante.

var sliderdemo = new Slider('#demo', '.z-slide-item', {


// options here
});

Posibles opciones de slider.

// initial slide
'current': 0,

 // transition delay
'duration': 0.8,

 // minimum percent to trigger the sliding
'minPercentToSlide': null,

 // auto play
'autoplay': true,

// left or right
'direction': 'left',

 // transition delay
'interval': 5 // 5 seconds

Registro de cambios

v0.0.3

• corregir el error setCompatibleStyle, exigir-WebKit-prefix