Super Simple Slider

Name: Super Simple Slider
Brand: Jose Aguilar
SKU: joseaguilarblog-7428
Availability: InStock
Rating: 5 (6 reviews)

Super Simple Slider es un plugin de jQuery que permite crear un slider o slideshow con una capacidad muy buena y un peso de menos de 1kb.

Es un plugin muy ligero que puede ser ideal para una web donde la prioridad máxima es el rendimiento y necesita mostrar un control de diapositivas lo más simple posible.

En la red puedes encontrar infinidad de controles deslizantes y muchos de ellos son geniales. Generalmente están repletos de funcionalidades o características que quizás no son necesarios para tus propósitos.

Super Simple Slider tiene lo básico para la construcción de un control deslizante.

Características de Super Simple Slider

Super Simple Slider es básico, funcional, flexible y con un peso de menos de 1kb.

La versión minimizada de Super Simple Slider tiene tan solo 991 bytes. Es un archivo que va a cargar muy rápido en tu sitio web. Esto es ideal para dispositivos pequeños.

Un detalle que me gusta mucho es que puedes pulsar las teclas de flecha izquierda y derecha del teclado para pasar las diapositivas.

Funciona con cualquier contenido HTML. Al ser tan simple, es fácil suponer que este control deslizante solo funciona con imágenes pero, no es así. Puedes usarlo para vídeos, iframes, HTML, etc.

Es compatible con todos los navegadores modernos. Olvídate si deseas utilizarlo en Internet Explorer 6 o inferior.

Diseño adaptado a todos los dispositivos. Hoy en día estos es indispensable. Un control deslizante no receptivo ya no es una buena idea.

Agregar Super Simple Slider a tu página web

Agregar y usar este plugin en tu página web es muy simple.

En la cabecera de la página o dentro de la etiqueta <head> agrega la librería jQuery, los estilos y el plugin Super Simple Slider que puedes descargar de la página oficial. No debes olvidarte de la llamada al plugin con las opciones:

Source code

<link rel="stylesheet" href="css/sss.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/sss.min.js"></script>
<script>
$(document).ready(function(){
    $('.slider').sss({
        slideShow : true,
    });
});
</script>

Si estás muy preocupado por el rendimiento, este código también se puede agregar antes de la etiqueta de cierre </body>. De esta forma, te aseguras de que el contenido cargue antes que el plugin.

En el cuerpo de la página o dentro de la etiqueta <body>, allí donde más desees, agrega el código HTML con los elementos dentro del control deslizante:

Source code

<div class="slider">
    <img src="images/image1.jpg" />
    <img src="images/image2.jpg" />
    <img src="images/image3.jpg" />
    <div><img src="images/image4.jpg" /><span class="caption">This one has a caption</span></div>
</div>

La clase del contenedor «slider» es la clave que utilizamos para llamar al plugin Super Simple Slider.

A partir de ahora, todos los elementos que hay dentro del contenedor con class=»slider» se van a incluir en un control deslizante como el siguiente:

Si te fijas, los elementos del slider pueden ser imágenes o contenedores directamente. No utiliza una lista desordenado como otros plugins.

Además de eso, el plugin Super Simple Slider se encarga de mostrar las flechas que ves a cada lado de la diapositiva y que tienen la funcionalidad de ir hacia atrás o adelante. La hoja de estilos que incluye el plugin ya tiene preparado esto.

Opciones

Como la mayoría de plugins para crear un slider, Super Simple Slider también tiene opciones pero, son mínimas.

Tan solo puedes utilizar el atributo «slideShow» con valores true o false. Esto permite animar el control deslizante de forma automática o no.

Conclusión

Super Simple Slider es receptivo. Adaptable a todos los dispositivos. Se adapta perfectamente en teléfonos móvils y tablets, lo que mejora considerablemente la experiencia de usuario en tu sitio web. Es muy ligero. Esto hará que tu página cargue más rápido.

El único inconveniente que puedo ponerle es que no parece funcionar con versiones más avanzadas de jQuery. Esto parece que está por mejorar.

Ver demo Descargar