Carousel Effect & Bootstrap Layout Bootstrap carousel

El deslizador está basado en la popular estructura de desarrollo web ‘Bootstrap’. Utiliza colores simples y elementos UI para mantener una imagen simple y minimalista, pero utilizando los mismos tipos de letra y selección del diseño de Bootstrap. Por lo tanto, se le hará será muy sencillo integrar este deslizador a cualquier sitio web construido con la estructura de ‘bootstrap’.

Lo que más destaca de este diseño es el efecto de cambio. Utiliza el efecto de carousel basic, donde cada imagen da paso a la otra girando hacia un lado. Este efecto crea una impresión tridimensional que permite que el deslizador resalte, creando mucho movimiento que atrae la atención.

Puedes escoger entre una gran variedad de otros efectos, pero para lograr que el deslizador sea atractivo a la vista deberás escoger uno que tenga mucho movimiento. ‘Book’ y ‘Blinds’ son buenas opciones.

El deslizador utiliza un único color para el texto y los elementos de navegación. En esta demostración el color es blanco, el cual contrasta muy bien con imágenes oscuras y coloridas. Podrás cambiar el color si así lo desea, para combinar con algún tipo de imagen o simplemente para combinar con el resto del sitio web.

Las flechas de navegación son blancas y semitransparentes. Cuando el usuario interactúa con ellas, las flechas se tornan opacas. Presionando sobre las flechas le permite al usuario moverse hacia el frente o hacia atrás por entre las imágenes.

El usuario también puede interactuar con el deslizador al presionar los círculos en el fondo de la imagen. Cada círculo representa una imagen, y presionando sobre ellos le permitirán al usuario saltar a una imagen en particular. Esto es útil para aquellos casos en los que hay muchas imágenes, para que así el usuario no tenga que esperar por todo el ciclo para ver una imagen de interés. Se recomienda que el usuario aproveche la vista previa de cada imagen, la cual aparece cuando se pasa el cursor por encima de cualquiera de los círculos. Además, el círculo asociado a la imagen actual en el deslizador resalta por entre los demás (el círculo transparente de bordes blancos se torna opaco de color blanco), lo cual ayuda a los usuarios a entender cómo funciona la navegación por medio de los círculos.

El titulado contiene un título y una descripción. El tipo de letra utilizado lo es Helvetica Neue, el mismo que se utiliza en la estructura de Bootstrap. Es un tipo de letra sans-serif claro y moderno. Una leve sombra ayuda a que el texto parezca salir de la pantalla, resaltándolo.

El deslizador responde bien, funcionando a la perfección en teléfonos inteligentes, tabletas, computadoras o televisores inteligentes. En pantallas pequeñas desaparecen los elementos de navegación como las flechas y los círculos, logrando así un mayor espacio para las imágenes y permitiéndoles que maximicen el espacio que utilizan. El titulado, por otro lado, permanece inclusive en pantallas pequeñas.

Este deslizador será ideal para cualquier compañía que busque por presentar una apariencia moderna y profesional a sus visitantes. Encaja bien con diseños minimalistas, con sitios de tecnología y es perfecto para los escritores de blog.