Slider de imágenes con etiquetas estilo acordeón con jQuery

LiteAccordion es un pequeño y atractivo plugin para jQuery para la creación de sliders animados. Combina la disposición estilo acordeón, utilizando para ello unas hermosas etiquetas marcando la transición entre las distintas dispositivas. A su vez utiliza el clásico esquema HTML basado en listas anidadas para la estructura básica del visor.

LittleAcordeon hace perfecto honor a su nombre, siendo un slider que pesa apenas 4 KB en su versión normal, y sorprende con el peso de su versión simplificada que tiene un tamaño inferior a los 1.6 KB, increíble.

Si bien la idea inicial del creador era utilizar este slider solo para imágenes, es importante aclarar que puede ser utilizado con otros archivos, por ejemplo textos, vídeos, o bien cualquier elemento que coloquemos dentro de las divs utilizadas en su estructura esqueleto.

slider estilo acorderon con etiquetas jQuery

Inicialmente el plugin muestra un slider de 960px de ancho, esto puede ser fácilmente modificado mediante parámetros de configuración a la hora de inicializar el plugin, ademas de obviamente unas pocas lineas en las hojas de estilo.

Ejemplo de uso:

$('#slider').liteAccordion({
        onTriggerSlide : function() {
            this.find('figcaption').fadeOut();
        },
        onSlideAnimComplete : function() {
            this.find('figcaption').fadeIn();
        },
        autoPlay : true,
        pauseOnHover : true,
        theme : 'stitch',
        rounded : true,
        enumerateSlides : true
}).find('figcaption:first').show();

Actualmente el slider esta probado en las ultimas versiones de los navegadores más populares, eso incluye Firefox, Chrome, Safari y Opera, tanto en Windows 7 y OSX. El navegador que no es soportado, y como muchos están sospechando, es el Internet Explorer 6.

Utilizar este plugin es gratuito tanto en sitios personales, como comerciales, el autor aclara que no desea, ni tiene planeado, vender este plugin, aunque no desprecia ningún tipo de donaciones o contribuciones con el proyecto 😀

No olviden visitar la demostración online, de paso pueden leer un poco más acerca de las opciones disponibles a la hora de configurar este fantástico plugin.

Web: liteAccordion