3D Carousel Bootstrap

3D Carousel Bootstrap / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

3D Carousel Bootstrap

El uso de slide o carusel en el index es un recurso común en un gran cantidad de páginas web. Son útiles para mostrar el contenido más destacado y captar la atención del usuario de una forma rápida y eficiente.

Estamos acostumbrados a que el slide contenga imágenes y/o texto de una forma plana, pero podemos ir un poco más lejos.

Basandonos en el Carousel básico de Bootstrap, hemos añadido una caja de texto con efecto 3D, donde la información recibe un grado de atención extra.

Para poder apreciar el efecto, el slide ha de estar parado.

El CSS:

Al div contenedor le he hemos creado la class ".itemtext" para definir sus forma, color, posición, etc.

La class ".activeText" es uno de los elementos responsables del movimiento rotatorio del item que tiene esta clase.

Utilizando ".itemtext.activeText ~ .itemtext", donde ~ es el selector general de elementos hermanos, aporta el movimiento al siguiente div ".itemtext".

El Javascript:

Declaramos las siguientes clases:

".itemtext", ".activeText", ".right" y ".left", que serán los elementos responsables de crear el movimiento y de añadirlo cuando se hace click en ".right" y ".left", que se asociaran por su clase a las felchas del slide.

Se realiza un "conteo" de los elementos ".itemtext", y se le añade la clase ".activeText" al elemento actual.

See the Pen 3D Carousel Bootstrap by Mariano J. (@didac) on CodePen.

Puedes ver el JS desarrollado y el slide en funcionamiento en mi perfil de Codepen

Mariano J.

Escribe un comentario

Tu email no se hará visible