Biblioteca de Slider de contenido multiplataforma-TouchSlider

Vista prévia

Descripción

TouchSlider es una biblioteca de contenido deslizante versátil, adaptable, personalizable, multiplataforma y de alto rendimiento diseñada para páginas web de escritorio y móviles.

Características

• Soporta la rueda del ratón, teclado, toque deslizar y arrastrar el ratón.
• Soporta modos verticales y horizontales.
• Soporta cualquier contenido con diferentes tamaños.
• Reproducción automática y pausa en el desplazamiento.
• Totalmente styable a través de su propia experiencia CSS.
• También se admiten los modos de pantalla completa.
• Funciona perfecto en móviles, ordenadores y tablets.
• Muerto fácil de usar.
• JavaScript puro. No hay 3 dependencias.

Funcionamiento

Inserte el contenido de la diapositiva en una lista de direcciones HTML como esta:

<ul id='slider'>

<li>Slide 1</li>

<li>Slide 2</li>

<li>Slide 3</li>

<li>Slide 4</li>

<li>Slide 5</li>

...
</ul>

Cargue el script touchslider. js al final del documento HTML para mejorar la velocidad de carga de la página.

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

Cree un nuevo objeto TouchSlider con las opciones predeterminadas.

new TouchSlider('slider');

Configuración del control deslizante de contenido con las siguientes opciones.

new TouchSlider('slider',{


// sliding duration

duration:600,


 // 1: vertical

// 2: horizontal

direction:1,


// initial slide

start:0,


 // left(top) center(middle) right(bottom)

align:'center',


 // enable mouse drag

mouse:true,


 // enable mouse wheel

mousewheel:false,


 // enable arrow keys

arrowkey:false,


// fullsize mode

fullsize:true,


// autoplay

autoplay:true,


 // autoplay interval

interval:int


});

Api.

var ts=new TouchSlider('slider')

// prev slide
ts.prev();

// next slide
ts.next();

 // goto n slide
ts.slide(n);

 // play
ts.play();

 // pause
ts.pause();

 // add a new slide
ts.prepend(DOM_NODE);
ts.append(DOM_NODE);
ts.insertBefore(DOM_NODE,index);
ts.insertAfter(DOM_NODE,index);

 // remove a slide
ts.remove(index);

 // is static
ts.isStatic();


// destroy the instance
ts.destroy();

Eventos.

// before
 // after
 // dragStart
// dragMove
// dragEnd
ts.on(event,callback);