Slider para Web App
Todos conocemos el efecto de pase de fotos o de la navegación entre contenidos en un Smartphone o tablet. Al desplazar el contenido hacia un lado u otro, este desaparece y aparece el siguiente. Este es el código que traemos hoy en este post de diseño web, en este caso para Web App.
El complemento utilizado es Swipe, un slider ligero hecho para mobile.
Al igual que si de un iPhone, iPad o Android se tratase, el pase de fotografías o contenidos se puede hacer en ambas direcciones, además, Swipe permite el giro de pantalla y se adapta a la pantalla escalándose sin problema alguno.
La implementación del código es muy sencilla y como hemos dicho, el contenido del slider pueden ser fotografías o bien contenidos HTML. El funcionamiento y la forma de maquetarlo es la misma.
Existe un <div> principal, el contenedor del slider, nuestras pantallas van a estar dentro de un <div> que a su vez estará dentro de una lista, esa lista es la que forma el contenido del slider. Si queremos añadir una pantalla, bastará con introducir otro elemento más a la lista.
<div id='slider'>
<ul>
<li style='display:block'><div>imagen o contenido</div></li>
<li style='display:none'><div>...</div></li>
<li style='display:none'><div>...</div></li>
<li style='display:none'><div>...</div></li>
<li style='display:none'><div>...</div></li>
<li style='display:none'><div>...</div></li>
</ul>
</div>
La transición de pantallas también se puede hacer con botones, de este modo cubrimos también la navegación fuera de smartphones, si ese es el caso, este es el código que hay que incorporar:
<nav>
<a href="#" id="prev" onclick="slider.prev();return false;">
<em>prev</em></a>
<span id="position"><em>•</em><em>•</em><em>•</em></span>
<a href="#" id="next" onclick="slider.next();return false;">
<em>next</em></a>
</nav>
Otra parte del código que seguro que os va a interesar, es la configuración del slider.
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
callback: function(event, index, elem) {
// do something cool
}
});
- startSlide por defecto vale 0, y nos indica por qué diapositiva tiene que empezar el pase.
- speed por defecto vale 300, y marca la velocidad de transición anterior y siguiente en milisegundos.
- auto indica el tiempo de espera hasta comenzar con el pase automático de diapositivas.
El resto del código no necesita presentación, la llamada al JS, CSS y poco más.
El ZIP que vais a descargar contiene un index.html, la hoja de estilos y dos JS, swipe.js y swipe.min.js
