Cómo construir un control deslizante de carrusel sensible a pantalla completa con Owl.js

En una publicación anterior, le mostré cómo crear una galería de imágenes personalizada con slick.js. Hoy abarcaré el proceso de creación de un control deslizante de carrusel de pantalla completa, animado con owl.js (o "Owl Carrusel").

Como de costumbre, para tener una idea inicial de lo que estaremos construyendo, eche un vistazo a la demostración de CodePen relacionada (consulte la versión más grande para una mejor experiencia):

¿Qué es el carrusel de búho??

Owl.js es un popular complemento de jQuery creado por David Deutch que te permite construir carruseles atractivos y sensibles. Para comprender mejor lo que este complemento puede ofrecerle, consulte las demostraciones..

Afortunadamente, tiene un gran soporte para el navegador, ya que se ha probado en los siguientes dispositivos:

• Cromo
• Firefox
• Ópera
• IE7 / 8/10/11
• iPad Safari
• iPod4 Safari
• Nexus 7 Chrome
• Galaxy s4
• Nokia 8s Windows8

Para más detalles mira la documentación..

Comenzando con Owl.js

Para comenzar con Owl, comience descargando e instalando los siguientes archivos en su proyecto:

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

Opcionalmente, es posible que desee importar el owl.theme.default.css expediente.

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

Para los fines de este tutorial, más allá de los archivos de búhos, también he incorporado Babel y Bootstrap 4.

Con eso en mente, si miras debajo de la Ajustes pestaña de nuestra pluma de demostración, verás que he incluido tres archivos CSS externos y dos archivos JavaScript externos.

1. El HTML

Para empezar, definimos un carrusel que tiene tres diapositivas. Cada una de esas diapositivas contiene un título, un subtítulo y un botón de llamada 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 clases de Bootstrap 4. El marco de Bootstrap no es vital; Lo incluí solo porque quería acelerar el desarrollo de CSS.
2. Agregué 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. Para simplificar, solo discutiremos una parte de los estilos disponibles.

Primero, definimos dos propiedades personalizadas y dos clases auxiliares:

: raíz --main-white-color: white; --main-black-color: negro;  .static posición: estática;  .cover background-size: cover; posición de fondo: centro; repetición de fondo: no repetición; 

A continuación, especificamos estilos para las diapositivas del carrusel, incluidas las transiciones:

.owl-carrusel .owl-slide posición: relativo; altura: 100vh; color de fondo: lightgray;  .owl-carrusel .owl-slide-animated transform: translateX (20px); opacidad: 0; visibilidad: oculta; transición: todos los 0.05s;  .owl-carousel .owl-slide-animated.is-transitioned transform: none; opacidad: 1; visibilidad: visible; transición: todos los 0.5s;  .owl-carrusel .owl-slide-title.is -itorizado transición-retardo: 0.2s;  .owl-carousel .owl-slide-subtitle.is-transitioned transition-delay: 0.35s;  .owl-carrusel .owl-slide-cta.is -itorizado transición-retardo: 0.5s; 

Finalmente, establecemos algunas reglas para los métodos de navegación:

.owl-carrusel .owl-dots, .owl-carrusel .owl-nav position: absolute;  .owl-carrusel .owl-dots .owl-dot span background: transparente; borde: 1px sólido var (- main-black-color); transición: toda la facilidad de 0.2s;  .owl-carousel .owl-dots .owl-dot: hover span, .owl-carrusel .owl-dots .owl-dot.active span background: var (- main-black-color);  .owl-carrusel .owl-nav izquierda: 50%; superior: 10%; transformar: traducirX (-50%); margen: 0; 

Nota: Las diapositivas deben cubrir la altura completa de la ventana y por lo tanto les damos altura: 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 (consulte 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 a JavaScript..

Inicializando el carrusel

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

Opciones de navegación del búho

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

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

const $ owlCarousel = $ (". owl-carousel"). owlCarousel (items: 1, loop: true, nav: true, navText: ['','']);

Agregar animaciones a elementos de diapositiva

Como siguiente paso animamos los contenidos de cada diapositiva. Este comportamiento se maneja a través de la cambiado evento que proporciona el búho. 

Aquí está el código asociado:

$ owlCarousel.on ("changed.owl.carousel", e => $ (". owl-slide-animated"). removeClass ("is-transitioned"); const $ currentOwlItem = $ (". owl-item" ) .eq (e.item.index); $ currentOwlItem.find (". owl-slide-animated"). addClass ("is-transitioned");); 

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

Nota: en vez de cambiado evento podríamos haber utilizado igualmente el traducido evento.

Hasta ahora, 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 el carrusel se carga inicialmente. Para implementar esta funcionalidad, usaremos el inicializado evento.

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

/ * debe vincular el evento inicializado antes de la inicialización del búho (ver demostración) * / $ (". owl-carrusel"). en ("initialized.owl.carousel", () => setTimeout (() => $ (".owl-item.active .owl-slide-animated"). addClass ("está en transición");, 200););

Dentro de ese evento agregamos el está en transición Clase a los elementos de la primera diapositiva..

Es importante tener en cuenta que este evento debe adjuntarse antes de la inicialización del carrusel..

Evitando que la página salte en carga

Antes de seguir adelante, vamos a cubrir una cosa difícil. Si miras la página de demostración, verás que hay un sección Elemento 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.. 

Hay dos formas de solucionar 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 el sección y mostrarlo tan pronto como el carrusel esté inicializado..

En términos de código, la regla CSS necesaria es esta:

sección pantalla: ninguna; 

Y el código JavaScript:

$ (". owl-carrusel"). on ("initialized.owl.carousel", () => setTimeout (() => // otro código aquí $ ("section"). show ();, 200););

Ajuste de la posición de los puntos

Lo último que tenemos que hacer es posicionar los puntos de navegación. Por defecto, está absolutamente posicionado. Las siguientes cosas deberían suceder:

1. Debe estar alineado horizontalmente con el .buho-texto de diapositiva elemento de la diapositiva de destino. 
2. Debe colocarse debajo de ese elemento con un espacio superior de 20px.

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

Aquí está esa función:

función setOwlDotsPosition () const $ target = $ (". owl-item.active .owl-slide-text"); doDotsCalculations ($ target); 

Esto aísla la .buho-texto de diapositiva elemento de la diapositiva activa y lo pasa como un argumento a la doDotsCalculations  sub función.

Aquí está esa subfunción:

function doDotsCalculations (el) const height = el.height (); const arriba, izquierda = el.position (); const res = altura + top + 20; $ (". owl-carrusel .owl-dots"). css (top: '$ res px', izquierda: '$ left px'); 

Dentro de esta función establecemos la adecuada. parte superior y izquierda valores de la .puntos de búho Elemento basado en la altura y posición del elemento objetivo.. 

Catering para cambiar el tamaño del navegador

Yendo un paso más allá, la posición de los puntos debe actualizarse a medida que redimensionamos la ventana del navegador. Para lograrlo, aprovechamos la redimensionar evento búho.

Aquí está el código necesario:

$ owlCarousel.on ("resize.owl.carousel", () => setTimeout (() => setOwlDotsPosition ();, 50););

Posicionamiento dependiendo del contenido

Por último, pero no 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 a cambiado evento de nuevo, somos capaces de resolver ese nuevo requisito.

Aquí está el código relacionado:

$ owlCarousel.on ("changed.owl.carousel", e => // otro código aquí const $ currentOwlItem = $ (". owl-item"). eq (e.item.index); const $ target = $ currentOwlItem.find (". owl-slide-text"); doDotsCalculations ($ target););

Pro Consejo

Antes de cerrar, vamos a discutir un error común de búho. Si eliminamos la sección que se encuentra debajo del carrusel, la barra de desplazamiento vertical desaparece yaparece una parte de la diapositiva adyacente.

Para solucionar esto, activamos la refrescar evento después de la inicialización del carrusel, como este: $ owlCarousel.trigger ("refresh.owl.carousel");

4. Soporte del navegador

La demostración debería funcionar bien en todos los navegadores recientes y puede usarla de forma segura en sus proyectos. Aquí hay un recordatorio de lo que hemos construido:

Conclusión

En este tutorial completo, logramos construir un control deslizante de carrusel animado de pantalla completa con owl.js. Es de esperar que haya adquirido nuevas habilidades que podrá poner en práctica en sus próximos proyectos. Como siempre, si tiene alguna pregunta, hágamelo saber en los comentarios a continuación.