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

Cómo crear una galería de imágenes atractiva y responsiva con slick.js

by
Difficulty:IntermediateLength:MediumLanguages:

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

En este tutorial utilizaremos slick.js, un popular plugin de jQuery, para crear una atractiva galería de imágenes responsiva. Aquí está la galería que vamos a elaborar:

Asegúrate de revisar la versión a pantalla completa y cambiar el tamaño de la ventana de tu navegador para ver cómo cambia su diseño según el tamaño de la ventana.

¿Qué es slick.js?

Slick.js es un conocido plugin de jQuery creado por Ken Wheeler que te permite crear hermosos carruseles responsivos. Para comprender mejor lo que este plugin puede ofrecer, revisa la documentación.

Por fortuna, funciona no solo en todos los navegadores modernos, sino también en algunos más antiguos como IE 8.

Es probable que también quieras echar un vistazo a la versión de WordPress.

Comenzando con slick.js

Para empezar con Slick, descarga e instala los siguientes archivos en tu proyecto:

  • jQuery (≥1.7)
  • slick.css o su versión minimizada
  • slick.js o su versión minimizada

Opcionalmente, es posible que quieras importar el archivo slick-theme.css.

Puede consegui una copia de los archivos Slick 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 optaré por la última opción.

Asimismo, incorporé a Babel para compilar el código ES6 a ES5 y Lodash para aprovechar su función debounce (la utilizaremos más adelante).

Con esto en mente, si observas en la pestaña Settings (ajustes) de nuestra demostración, verás que he incluido un archivo CSS externo y tres archivos JavaScript externos.

CSS settings on CodePen
Configuración de CSS en CodePen
JavaScript settings on CodePen
Configuraciones de JavaScript en CodePen

1. El HTML

En este punto es importante entender la estructura de nuestra página. Lo más importante es que definiremos dos carruseles que tienen exactamente las mismas imágenes y están sincronizados (comentaremos cómo más adelante). Las dimensiones de la imagen son 860 x 550 píxeles, aunque en tus proyectos, estas pueden ser diferentes.

Finalmente, como parte del segundo carrusel, especificaremos las flechas de navegación, así como un elemento que mantiene un seguimiento del número total de diapositivas.

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

2. El CSS

En total, nuestra galería debe tener cuatro aspectos distintos, dependiendo de la ventana disponible. Vamos a visualizarlos siguiendo un enfoque "móviles primero".

Cuando la ventana del navegador tenga menos de 480 píxeles, debería tener este aspecto, con solo el segundo carrusel y la navegación mostrandose:

The carousel layout on extra small screens
Distribución del carrusel en pantallas extra pequeñas

Luego, en pantallas entre 480px y 768px, debe ser como sigue, con dos miniaturas debajo de la diapositiva principal:

The carousel layout on small screens
Distribución deL carrusel en pantallas pequeñas.

A continuación, en las pantallas entre 769px y 1023px, presentaremos una tercera miniatura:

Por último, en pantallas grandes (≥1024 px), debe ser como sigue, con las miniaturas apareciendo a un lado (nota que no caben completamente en esta imagen en su totalidad):

The carousel layout on large screens
Distribución del carrusel en pantallas grandes.

Todos los casos anteriores se ajustan con los "media queries" que se muestran a continuación:

Observa que hay una regla !important. Esto sobrescribe un estilo "inline" de Slick.

3. El JavaScript

Ahora vamos a centrar nuestra atención en las cosas relacionadas con JavaScript.

Almacenando selectores en caché

Cuando el DOM está listo, como buena práctica almacenamos en memoria caché algunos selectores de uso común:

Inicializando los carruseles

Luego, inicializamos y sincronizamos nuestros dos carruseles. El código responsable de este comportamiento es el siguiente:

Sin duda, la mejor manera de comprender cómo funciona este código es leer la documentación de Slick. Sin embargo, déjame explicar dos cosas importantes aquí:

  • La opción de configuración asNavFor nos permite sincronizar los carruseles y utilizar uno como navegación del  otro.
  • De forma predeterminada, Slick utiliza transformaciones CSS. En nuestro caso, sin embargo, las deshabilitamos configurando useTransform: false. Esto es porque causan un pequeño parpadeo en la primera diapositiva del primer carrusel en pantallas grandes (podríamos haberlas desactivado solo para el primer carrusel).

Visualizando y modificando la disposición de la galería

Nuestra galería debe ser visible solo cuando todos los recursos de la página estén listos. Inicialmente, aparece un precargador opcional (consulta el markup de nuevo), se ve así:

En este punto, tenemos que volver a pensar en la distribución deseada de la galería  en pantallas grandes. Si vuelves a mirar las capturas de pantalla correspondientes, notarás que ambos carruseles tienen la misma altura. Para lograr ese comportamiento deseado, tenemos que escribir un código JavaScript personalizado (más allá de nuestro CSS). Este código establecerá dinámicamente la altura del primer carrusel igual a la altura del segundo (o viceversa).

Conociendo los requisitos anteriores, aquí está el código que se ejecuta cuando toda la página está lista:

Y aquí está la declaración de la función handleCarouselsHeight:

Cuando la página se carga, la galería funciona bien. Pero también debería funcionar como se esperaba cuando la ventana del navegador cambie de tamaño.

El código que afronta esa situación se muestra a continuación:

Observa que el controlador de eventos está envuelto dentro de una función debounce. Esta es una función de Lodash que nos ayuda a restringir la cantidad de veces que se llama este controlador.

Trabajando con los eventos y métodos de Slick

Ahora que hemos implementado con éxito la funcionalidad principal de nuestra galería, vamos a ir un paso más allá y crearemos algunas cosas opcionales.

Primero, en la esquina superior derecha del segundo carrusel, mostramos la diapositiva actual y el número total de diapositivas.

Displaying the current slide and the total number of slides
Mostrando la diapositiva actual y el número total de diapositivas

Para lograr esto, aprovechamos los eventos de Slick init y afterChange.

Aquí está el código relacionado:

Como una mejora adicional, cada vez que hagamos clic en una diapositiva del primer carrusel, la diapositiva asociada del segundo carrusel debe estar activa. Gracias al método slickGoTo de Slick, podemos desarrollar esta funcionalidad.

Aquí está el código relacionado:

4. Soporte en navegadores

La demostración debería funcionar bien en todos los navegadores recientes y puedes utilizarla de forma segura en tus proyectos.

Solamente he encontrado un pequeño error en algunos navegadores (Firefox, Edge) al probar la demostración en pantallas grandes. Al hacer clic en las flechas de navegación, todas las diapositivas del primer carrusel, aparte del primero, fallan para alcanzar el borde superior y dejan un espacio de un solo píxel:

Slick leaves one pixel bug on some browsers
El error de un píxel de Slick en algunos navegadores

Y en último lugar, aunque no menos importante, es posible que se necesiten pequeñas mejoras y modificaciones a medida que la ventana cambie de tamaño, dependiendo de tus necesidades.

Conclusión

En este tutorial, aprovechamos slick.js y logramos construir una hermosa galería con capacidad responsiva. Esperemos que ahora estés listo para probar esta implementación en tus propios proyectos. Si eso ocurre, ¡siéntete libre de compartir el enlace de tu proyecto en los comentarios!

Más proyectos de JavaScript para "condimentar" tus sitios web

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.