Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery
Webdesign

Cómo crear un carrusel deslizante responsivo a pantalla completa con Owl.js

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En una publicación anterior, te mostré cómo crear una galería de imágenes personalizada con slick.js. Hoy cubriré el proceso de creación de un slider animado, responsivo y a pantalla completa con owl.js ("Owl Carrusel").

Como siempre, para tener una idea inicial de lo que estaremos creando, echa un vistazo a la demostración de CodePen (consulta la versión más grande para una mejor experiencia):

¿Qué es Owl Carousel?

Owl.js es un popular plugin de jQuery creado por David Deutch que te permite crear carruseles atractivos y responsivos. Para comprender mejor lo que este plugin puede brindar, revisa las demostraciones.

Afortunadamente, tiene un gran soporte para navegadores, y ha sido probado en los siguientes dispositivos:

  • Chrome
  • Firefox
  • Opera
  • IE7/8/10/11
  • Safari en iPad
  • Safari en iPod4
  • Chrome en Nexus 7
  • Chrome
  • Windows8 en Nokia 8s

Para mayores detalles echa un vistazo a la documentación.

Empezando con Owl.js

Para iniciar con Owl, descarga e instala los siguientes archivos en tu proyecto:

  • jQuery
  • owl.carousel.css o su versión reducida
  • owl.carousel.js o su versión reducida

Opcionalmente, es posible que quieras importar el archivo owl.theme.default.css.

Puedes conseguir una copia de los archivos de Owl correspondientes visitando su repositorio Github, utilizando un administrador de paquetes (por ejemplo, npm), o cargando los recursos necesarios a través de un CDN (por ejemplo, cdnjs). Para este tutorial, yo elegiré la última opción.

Para los fines de este tutorial, además de los archivos de Owl, también he incorporado Babel y Bootstrap 4.

Considerando esto, si te fijas en la pestaña Settings (configuraciones) de nuestro lápiz de demostración, verás que he incluido tres archivos CSS externos y dos archivos JavaScript externos.

CSS Settings on Codepen
JavaScript settings on CodePen

1. El HTML

Para iniciar, definimos un carrusel que tiene tres diapositivas. Cada una de esas diapositivas contiene un título, un subtítulo y un botón de llamado a la acción.

Aquí está la estructura requerida para nuestra página de demostración:

Vale la pena mencionar dos cosas en este punto:

  1. El código anterior hace uso de las "classes" de Bootstrap 4. La estructura de Bootstrap no es vital; Lo incluí solo porque quería acelerar el desarrollo de CSS.
  2. Añadí la imagen de fondo de cada diapositiva a través de estilos en línea. La mayoría de las veces, cuando se trata de contenido dinámico, este es el método CSS más común para agregar imágenes de fondo.

2. El CSS

Con el HTML en su lugar, veamos los estilos CSS que aplicaremos a nuestra página. Por simplicidad, solo discutiremos una parte de los estilos disponibles.

Primero, definimos dos propiedades modificadas y dos clases auxiliares:

Luego, especificamos estilos para las diapositivas del carrusel, incluyendo las transiciones:

Por último, establecemos algunas reglas para los métodos de navegación:

Nota: Las diapositivas deben cubrir la altura completa de la ventana y, por consiguiente, les proporcionamos height: 100vh. Sin embargo, como esta unidad es inconsistente en algunos dispositivos (por ejemplo, dispositivos iOS), otra opción es configurar la altura de las diapositivas a través de JavaScript (consulta el panel de JavaScript de la demostración para obtener más información).

3. El JavaScript

En este punto, estamos listos para dirigir nuestra atención al JavaScript.

Inicializando el carrusel

Como primer paso, inicializaremos el carrusel. Por defecto, el plugin proporciona "puntos de navegación", pero nuestro carrusel también incluirá flechas de navegación.

owl navigation options
Opciones de navegación de Owl

Habilitamos la opción de nav a través de la propiedad de configuración. También, definimos algunos SVG personalizados como flechas gracias a la propiedad de configuración navText.

El código que dispara el carrusel se muestra a continuación:

Añadiendo animaciones a los elementos de la diapositiva

Como siguiente paso animamos los contenidos de cada diapositiva. Este comportamiento se manipula a través del evento changed que Owl ofrece.

Aquí está el código asociado:

Así que cada vez que veamos una nueva diapositiva, en primer lugar desaparecen los contenidos de todas las diapositivas. Luego, los contenidos de la diapositiva en curso aparecen con una agradable animación.

Nota: en vez del evento changed, podríamos haber utilizado igualmente el evento translated.

Hasta el momento, hemos visto cómo se activan las animaciones a medida que avanzamos por las diapositivas. Pero también queremos ese tipo de animación cuando inicialmente se carga el carrusel. Para implementar esta funcionalidad, utilizaremos el evento initialized.

Aquí está el código relacionado con este evento:

Dentro de ese evento, añadimos la clase is-transitioned  a los elementos de la primera diapositiva.

Es importante señalar que este evento se debe adjuntar antes de la inicialización del carrusel.

Previniendo que la página salte durante la carga

Antes de continuar, vamos a cubrir una cosa complicada. Si observas la página de demostración, verás que hay un elemento section definido debajo del carrusel. Por defecto, hasta que se carga el carrusel, aparecen los contenidos de la sección y ocurre un pequeño salto en nuestra página.

Existen dos maneras para corregir este comportamiento no deseado. Primero, podemos agregar un precargador (ya lo hicimos en el tutorial relacionado con Slick). Una segunda opción que implementaremos aquí es ocultar la section y mostrarla tan pronto como se inicialice el carrusel.

En términos de código, la regla de CSS necesaria sería esta:

Y el código de JavaScript:

Ajustando la posición de los puntos

Lo último que tenemos que hacer es posicionar los puntos de navegación. De forma predeterminada, está absolutamente posicionado. Las siguientes cosas deben ocurrir:

  1. Debe ser alineado horizontalmente con el elemento .owl-slide-text de la diapositiva objetivo.
  2. Debe ser posicionado debajo de ese elemento con un distancia superior a 20px.

La función que se ejecuta y establece la posición deseada para nuestros puntos es setOwlDotsPosition.

Aquí está esa función:

Esto aísla al elemento .owl-slide-text de la diapositiva activa y lo pasa como un argumento a la subfunción doDotsCalculations.

Aquí está esa subfunción:

Dentro de esta función, establecemos los valores top y left apropiados del elemento .owl-dots basados en la altura y la posición del elemento objetivo.

Cambiando el tamaño del navegador

Yendo un paso más allá, la posición de los puntos debe actualizarse a medida que redimensionemos la ventana del navegador. Para lograr esto, aprovechamos el evento Owl resize.

Aquí está el código necesario:

Posicionando dependiendo del contenido

Por último, pero no por eso menos importante, a medida que navegamos a través de las diapositivas, los puntos deben reposicionarse en función de la altura y la posición del contenido de la diapositiva activa. Gracias al evento changed otra vez, podemos resolver ese nuevo requisito.

Aquí está el código relacionado:

Consejo profesional

Antes de concluir, vamos a discutir un error común de Owl. Si eliminamos la sección que está situada debajo del carrusel, la barra de desplazamiento vertical desaparece y aparece una parte de la diapositiva adyacente.

How to remove the right gap when there isnt vertical scrollbar

Para corregir esto, activamos el evento refresh después de la inicialización del carrusel, de esta forma: $($owlCarousel).trigger("refresh.owl.carousel");

4. Soporte del navegador

La demostración debería funcionar bien en todos los navegadores recientes y puedes utilizarla de forma segura en tus proyectos. Aquí hay un recordatorio de lo que hemos creado:

Conclusión

En este minucioso tutorial, logramos crear un carrusel deslizante animado a pantalla completa con owl.js. Esperamos que hayas obtenido algunas habilidades nuevas que podrás poner en práctica en tus próximos proyectos. Como siempre, si tienes alguna pregunta, déjamelo saber en los comentarios.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.