Los sliders de contenido destacado se han puesto de moda, y la verdad es que son una forma bonita y elegante de tener siempre en primera página el contenido más relevante de tu sitio, de forma que los lectores que lleguen por casualidad tengan siempre un rápido acceso a él y la oportunidad de leerlo.
Últimamente he estado planteándome la idea de introducir uno de estos en mi blog. Para ello necesito usar jQuery, ya que es el framework que uso en el blog, así que durante este último mes he estado anotando cada script o plugin de jQuery que permitiera crear este tipo de efectos. El resultado final es este, una recopilación de 16 formas diferentes de crear un scroll/galería de contenido destacado en un sitio web usando jQuery.
Aunque he visto más scripts por ahí, estos son para mi gusto los que más adecuados, pero si tú conoces alguno que crees que debería ser incluido y me lo he dejado, indícalo en los comentarios.
En este post encontrarás...
Coda Slider 1.1.1
CodaSlider es uno de los clásicos, implementado en multitud de themes premium. Puedes encontrar documentación en el blog del autor y hay un buen tutorial en Nettuts donde indican como implementar un blogroll deslizable con CodaSlider.
También hay un tutorial en CSS-Tricks donde se explica paso a paso como implementarlo. El resultado es bastante bueno.
Easy Slider 1.5
Easy Slider 1.5 es un slider creado por CSSGlobe. Incluye muchas opciones, aunque le falta navegación numérica. Si no la necesitas puede servirte.
Características
- Pase automático.
- Pase continuo.
- Botones «ir al primero» e «ir al último».
- Muestra y oculta los controles según sea necesario.
- Permite definir el marcado de antes y después de cada control.
- Pase de diapositivas vertical.
- Muchos sliders en una página.
Easy Slider 1.7
EasySlider 1.7 es básicamente el mismo plugin que el anterior, pero con el añadido de la navegación numérica.
AnythingSlider
Sobre este plugin ya he hablado hace poco, así que no me voy a repetir. Solamente indicar que me parece una de las mejores opciones, y que contiene todo lo que se puede pedir de un plugin para crear pases de diapositivas. Creado por CSS-Tricks.
Características
- Las diapositivas son contenido HTML.
- Flechas de «Siguiente» y «Anterior».
- La navegación numérica se genera automáticamente.
- Capacidad de auto-play.
- Cada diapositiva tiene un hashtag, por lo que se puede enlazar directamente a una diapositiva.
- Pase continuo de diapositivas.
- Admite multiples implementaciones por página.
- Pausa del autoplay en el evento on hover (opcional).
Start/Stop Slider
Este script, realizado también por CSS-Tricks, tiene un resultado bastante curioso. Lo he visto implementado en varios sitios. La diapositiva se compone de un thumbnail y un texto. El texto se desliza hacia la izquierda, mientras que la diapositiva desaparece por arriba. Si no dispones de thumbnails de tus artículos, es probable que no te interese.
Horinaja
De este plugin ya he hablado en anteriormente por lo que no voy a repetirme. Simplemente destacar que está disponible tanto como plugin de jQuery como para scriptaculous. Muy sencillo de implementar.
jCarousel
Un veterano ya. Aunque es antiguo, mantiene el tipo, y puede ser muy útil para crear scroll de thumbnails de nuestros artículos destacados. Anieto2k habló sobre este plugin hace algún tiempo ya (en el 2006). Su alternativa es Scrollable, de jQuery tools.
jQuery tools: Scrollable
Me encantan las herramientas de jQuery Tools. Son de muy alta calidad, de hecho mucha gente las ven como una alternativa a jQuery UI. Con Scrollable se pueden crear scrolls de contenido destacado muy vistosos, como el que hay implementado en Bitelia, en la parte superior.
Algunas características
- Scroll horizontal y vertical.
- Scroll con botones de navegación que incluyen su propia API con eventos, control de teclado, etc..
- El número de ítems sobre los que se hace scroll al mismo tiempo es personalizable.
- Acciones accesibles mediante programación como next, prev, nextPage, prevPage, seekTo, begin, and end.
Para mí esta es la mejor opción si se va a implementar un scroll de contenido destacado.
AD Gallery
AdGallery está más orientado a la creación de galerías de imágenes, pero si dispones de thumbnails del contenido, puedes realizar una galería con los thumbnails y el excerpt del artículo. El resultado es bastante bonito y las transiciones están muy conseguidas.
Gallery View
Otra implementación de galería fotográfica. Si quieres crear una galería de contenido destacado necesitarás thumbnails de tus artículos.
Serial Scroll
Este plugin puede ser utilizado para crear sliders de contenido destacado, scroll o para crear una marquesina al estilo </marquee>. Es bastante configurable y potente. Admite contenido HTML en las diapositivas. Se puede ver un ejemplo de implementación en el sitio web de themes premium Elegant Themes.
Step Carousel de Dinamic Drive
Un buen script de Dinamic Drive para crear un carousel. Admite contenido HTML en las diapositivas.
Galleria
Galleria es una galería de imágenes escrita en jQuery. Carga las imágenes una a una en una lista no ordenada y muestra los thumbnails. Puede crear thumbnails de la imagen grande por ti si así lo configuras. Puede ser útil si se dispone de thumbnails en los artículos.
Tutorial de Designmag (Image rotator)
Si sigues los pasos de este tutorial de Designmag, podrás crear esta galería. Las imágenes aparecen con la descripción. Válido si se dispone de thumbnails de los artículos. No se dispone de los ficheros para su descarga, pero se pueden obtener fácilmente de la demo.
jFlow 1.0
Este lo descubrí a través de un artículo de Xybernéticos, donde enlazaban a un artículo en el que se explicaba como crear un slider con los últimos posts de tu blog en WordPress. Su característica principal es que es muy liviano.
Galleriffic
De este script de jQuery ya habló hace un tiempo Anieto, que explica muy bien como utilizarlo.
Conclusión
De todos, yo me quedo con AnythingSlider, Horinaja y EasySlider 1.7 para crear galerías grandes de 5 artículos como máximo. Y Scrollable para realizar scroll de artículos destacados del estilo de Bitelia.