Slider de contenido móvil amigable con Pure JavaScript-zSlider

Vista prévia

Descripción

zSlider es una librería JavaScript pura destinada a crear un carrusel/Slider de contenido automático que soporta los eventos de arrastre del ratón de escritorio y de deslizamiento táctil móvil.

¿Cómo funciona?

Añada la hoja de estilos requerida en la sección head del documento.

<link rel="stylesheet" href="styles/zSlider.css">

Crea una lista de contenido/imágenes para el deslizador de carrusel.

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

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


<li class="z-slide-item"> <a href="#">



<h3>Content 1</h3>



</a> </li>


<li class="z-slide-item"> <a href="#">



<h3>Content 2</h3>



</a> </li>


<li class="z-slide-item"> <a href="#">



<h3>Content 3</h3>



</a> </li>

</ul>
</div>

Incluya el zSlider. js en la parte inferior del documento.

<script src="scripts/zSlider.js"></script>

Inicializa el deslizador de carrusel de contenido.

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


// OPTIONS HERE
});

Opciones de configuración.

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



// initial slide


'current': 0,



// animation speed


'duration': 0.8,



 // min percentage to trigger the slide


'minPercentToSlide': null,



// auto play


'autoplay': true,



// slide direction


'direction': 'left',



// autoplay interval


'interval': 5



 });

Registro de cambios

07/12/2018

• v0.0.4: fix setCompatibleStyle bug, enforce -webkit- prefix