Tecnología y Coaching para Emprendedores

8 Sliders de Imágenes para un Diseño Web Responsive

slider-imagen

El diseño web responsive empieza a ser un must debido a que cada vez son más los usuarios que navegan utilizando dispositivos móviles. Hemos visto ya algunos slider de imágenes para el diseño web tradicional, ahora vamos a ver los sliders creados con la idea de ser usados en diseño web responsive que además dan soporte a un layout fluido.

Un modo de ver como se modifican los sliders sin necesidad de usar diferentes dispositivos, es mirar la demo y reducir progresivamente el tamaño de ventana del navegador. Así veremos claramente cómo responde el slider los diferentes tamaños de pantalla. Un truco sencillo pero muy útil.

Responsive Image Sliders

1. TN3Gallery

Si bien este slider de imágenes es premium, ofrece una versión gratuita que es TN3Gallery Lite. TN3Gallery es una galería de imágenes responsive creada con jQuery que ofrece también una versión para WordPress. Se puede escoger el tipo de efecto que queremos tener entre las transiciones de imágenes. Este slider te permite también mostrar vídeos de Youtube, Flickr o Picasa Web. así como imágenes de Facebook. Las imágenes se pueden escalar de manera automática o fijar al tamaño máximo. La galería de imágenes también es responsive, adaptándose al ancho de pantalla disponible. También permite mostrar contenido HTML con el uso de etiquetas de HTML. Te permite además crear tu propia configuración de colores sin ni tan sólo haber de editar el CSS o el JavaScript. Tiene una APi muy potente (o al menos eso dicen en su web) y te permite agrupar las imágenes en álbums, con lo que las puedes reutilizar en diferentes proyectos.

2. Flexslider 2

Flexslider es un plugin gratis de jQuery desarrollado por el equipo de WooThemes. Tiene un markup semántico y simple y da soporte a la mayoría de navegadores. Los slides puedes ser horizontales y verticales y da soporte a slides múltiples, además de tener detrás una buena API. Se puede personalizar la configuración para darle un toque más personal y permite el uso de etiquetas HTML para mostrar contenido HTML en los slides.

3. Camera

Camera es un slideshow gratuito de jQuery que trae también la opción de instalarlo en WordPress. Trae incorporadas varias hojas de estilo CSS para que podamos escoger la que más nos guste en caso que no nos apetezca indagar en el código para personalizarlo.

4. PhotoSwipe

PhotoSwipe es una galería de imágenes especialmente diseñada pensando en dispositivos móviles, aunque lógicamente también da soporte a desktop. PhotoSwipe es un slider de imágenes gratuito basado en jQuery. Tienes bastantes opciones para configurar los efectos a tu gusto y tienes asegurada una buena experiencia de usuario en dispositivos móviles.

5. Blueberry

Blueberry es un slider de imágenes open source que pese a estar en versión beta parece una muy buena alternativa. Está desarrollado para ser usado especialmente con grids fluidos y dispositivos móviles.

6. UnoSlider

UnoSlider es un slider de imágenes responsive premium, esto es, de pago. A diferencia de TN3Gallery, no ofrece una versión gratuita. El plugin de jQuery tiene un coste de $9 y el de WordPress $14. La única diferencia que veo con los otros sliders es que ofrece soporte profesional en caso de tener algún problema con el plugin, por lo demás es muy parecido a nivel de funcionalidades.

7. Responsly.js

Respnsly.js es una colección de widgets responsive, redactado usando transformaciones de CSS3 y utiliza jQuery. En este momento está disponible un slideshow y un acordeón.

8. Swipe

Swipe es un slider de imágenes pensado para dispositivos móviles que pesa muy poco, lo que lo hace muy útil para problemas de ancho de banda

href=”http://swipejs.com/”>

¿Conoces algún otro slider de imágenes responsive que no haya citado y valga la pena? No dudes en dejar un enlace. Si ya has decidido usar uno de estos sliders, te recomiendo esta colección de frameworks y grids CSS3 para diseño web responsive. Y si todavía no te has puesto con el tema, entonces te irá de perlas esta recopilación de tutoriales para crear sitios web responsive.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!


Comentarios