Ejemplos de sliders de imágenes inspirados en Bootstrap

En la actualidad, el uso de sliders de imágenes en la pantalla de inicio es un recurso común en un gran cantidad de páginas web. Estos populares componentes se han vuelto esenciales para lograr captar la atención de los usuarios al mostrar los proyectos más impresionantes o los artículos que se encuentran en oferta. También sirve para demostrar los beneficios o diversos usos de un producto o servicio. Si has desarrollado anteriormente un sitio web, es probable que hayas hecho uso de sliders.

En este artículo listamos algunos sliders de imágenes que se han desarrollado teniendo como mayor inspiración los componentes de Twitter Bootstrap, poderosa framework que es la opción más popular de los desarrolladores al momento de crear un sitio web responsive.

Full slider

Full Slider, como su nombre indica, permite mostrar imágenes en pantalla completa que pueden ser enlazadas a otra página si así lo deseas. Se ha creado usando el Bootstrap Carousel. Es una plantilla que se puede adaptar a una gran variedad de sitios ya que las imágenes en pantalla completa son una tendencia actual que puede funcionar en empresas de diversos rubros.

Bootstrap Carousel with Text

Al implementar este código en tu sitio, no sólo podrás tener un slider para mostrar imágenes, sino que también podrás añadir cajas de texto. Es realmente útil en cualquier sitio web, ya que la frase de inicio suele tener un gran impacto en los visitantes.

CSS Slider

CSS Slider es un plugin ligero que posee características esenciales como reajuste automático de tamaño, soporte para SEO y pantallas de retina, así como compatibilidad con diversos navegadores. Es uno de los plugins para añadir sliders más populares que existe debido a las grandes ventajas que ofrece.

Wow Slider

Este flexible slider es otra opción popular aparte de CSS Slider. Te permite colocar imágenes que lucirán perfectas sin importar las dimensiones de las pantallas. También puedes añadir transiciones sencillas para mejorar la interactividad del sitio. Posee una gran variedad de transiciones, así que es probable que alguna de ellas será de tu agrado.

Responsive BS Carousel with Hero Headers

Este código te permite añadir un ligero carrusel de contenido de diseño responsive en donde tus imágenes lucirán bien en dispositivos diversos.

Bootstrap Carousel with Animate.css

See the Pen Bootstrap Carousel with Animate.css by SitePoint (@SitePoint) on CodePen.0

Este carrusel de imágenes hace uso de Animate.css para añadir transiciones fluidas que bien podrían marcar la diferencia en un sitio web. Como es de esperarse, los visitantes pueden cambiar de slider mediante las flechas que aparecen a cada lado de la imagen y puedes añadir leyendas a cada una de ellas.

Bootstrap Carousel Tooltip

See the Pen Bootstrap Carousel Tooltip by Antony Tanuputra (@inital_a) on CodePen.0

En este caso se hacen uso de dos recursos comunes en sitios web: los slider de contenidos y las anotaciones, de tal manera que puedes añadir leyendas a cada imagen sin que éstas sean visibles. El usuario puede visualizarlas al pinchar sobre el botón respectivo. Es una alternativa interesante a la forma usual de colocar leyendas en imágenes.

Simple Bootstrap Carousel with Text and Overlay

 

Este slider te permite mostrar imágenes centradas y añadirles texto para generar impacto en los visitantes que navegan por el sitio. A diferencia de otros sliders de la lista, presenta una zona de transparencia para colocar texto sin tener problemas de legibilidad.

Colourful Tabbed Slider Carousel

Este carrusel de imágenes es bastante peculiar pues presenta unas pestañas en la parte inferior, al pinchar sobre cada una de ellas puedes cambiar de imagen. Podría ser especialmente útil en un portafolio en línea donde se asigna una categoría a cada proyecto de manera que el visitante tiene una vista previa a cada tipo de proyectos que se suele realizar.

Bootstrap Carousel Fade-in, fade-out

See the Pen Bootstrap carousel fade-in, fade-out by Alfred Kolowrat (@alfredk) on CodePen.0

Este carrusel de imágenes posee todas las características comunes de cualquier slider: flechas a cado lado de la pantalla para poder cambiar de imagen y menú minimizado en la parte inferior central. Lo realmente notable son las transiciones que se han aplicado cuando el slider cambia.

Bootstrap Carousel with Animated Caption

See the Pen Bootstrap Carousel w/ Animated Caption by M.Satrya (@satrya) on CodePen.0

Este carrusel te ofrece animaciones sencillas para los títulos y el botón de llamada a la acción de que decidas colocar en cada imagen. De esta manera, añades un poco más de interactividad en tu sitio web sin saturar el sitio con animaciones pesadas.

Full Width Bootstrap Carousel

See the Pen Full Width Bootstrap Carousel by Matt Lambert (@cardeo) on CodePen.0

Full Width Bootstrap Carousel te permite colocar imágenes de tamaño completo en tu sitio web, función ideal para portafolios en línea o si simplemente quieres causar impacto en tu sitio web mediante impresionantes fotografías. Posee controles sencillos que los usuarios pueden usar para cambiar de imagen.

En conclusión…

Los sliders son un gran recurso para una gran variedad de sitios web y si bien existen ciertas pautas que deben tomarse en cuenta al crear uno, siempre hay espacio para la innovación y creatividad. En este artículo hemos visto desde las opciones más comunes hasta experimentos que podrían o no funcionar en ciertos sitios web.

Esperamos que esta lista te sea de utilidad, ya sea que estés buscando inspiración o desees implementar un slider de manera rápida.