Carrusel con React y Tailwind

Durante el desarrollo de un determinado proyecto, generalmente nos enfrentamos a demandas que pueden resolverse rápidamente utilizando bibliotecas especializadas, como React-Google-Charts para gráficos o Framer Motion para animaciones.

Sin embargo, ¿qué hacemos cuando una determinada empresa o proyecto en el que estamos involucrados no permite el uso de determinadas bibliotecas? En ese momento, mis queridos lectores, dependemos únicamente de nuestras habilidades para hacer todo lo necesario sin ningún medio facilitador.

Con eso en mente, decidí mostrar en este artículo una forma de crear carruseles usando solo React y Tailwind CSS. ¡Acompáñenme y les enseño!

Antes de empezar, ¿qué es React?

React es una biblioteca JavaScript de código abierto y es utilizada por muchas empresas famosas como Facebook, Instagram, etc. Enfocado en crear interfaces de usuario de una manera mucho más práctica que usar JavaScript puro, React ha ganado cada vez más popularidad por ser fácil de asimilar, comprender y adaptar.

E o que é o Tailwind CSS?

Tailwind es un framework creado para optimizar el uso de CSS. En lugar de que la estilización se realice mediante tags que tienen varios atributos definidos en un archivo importado con una extensión .css, su uso elimina esta necesidad ya que cada atributo (como width, height, display o position) tiene una clase con un nombre predeterminado por Tailwind y disponible en su documentación.

Centrado en el desarrollo mobile-first, todo el proceso de diseño se acelera y optimiza con Tailwind que, además de ser intuitivo, tiene documentación fácil de aprender y de búsqueda rápida: solo ingresa el nombre del atributo (como font-size, font-weight, o text-decoration) y proporciona una guía paso a paso sobre cómo usar el framework.

Ahora, ¿qué son los carruseles?

Carrossel é o nome que se dá para a apresentação de informações na tela de maneira cadenciada e organizada ao ponto de, em uma lista que contém diversos itens, sejam apresentados apenas alguns deles por vez, de acordo com a configuração feita pelo programador, alternando e ficando visível em tela por meio da interação do usuário.

La organización y belleza de la presentación con carruseles hace que este tipo de componente se utilice ampliamente en casi todas las aplicaciones web. Bueno, ¡hoy es el día para aprender a crear carruseles estilizados e implementados sin usar ningún marco o biblioteca además de Tailwind CSS y React!

Configurando React y Tailwind CSS

Lo primero que haremos será crear un proyecto donde realizaremos todo el proceso paso a paso. Para esto, vamos a crear un proyecto React e instalar el Tailwind CSS con los siguientes comandos que deben ejecutarse en tu terminal. Si todo va bien, al terminar de ejecutar estos comandos, se abrirá en el navegador una página con el símbolo de React en movimiento:

npx create-react-app carousel

cd carousel

npm install

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

npm start

Una vez instalado Tailwind, debemos configurarlo. Primero, reemplaza el contenido del archivo tailwind.config.js que se creó durante la instalación del marco con el código que se muestra a continuación. Esta implementación hará que Tailwind se use en todos los archivos de proyecto que tengan extensiones js, jsx, ts y tsx:

/**@type {import('tailwindcss').Config} */

module.exports = {

content: [

"./src/**/*.{js,jsx,ts,tsx}",

],

theme: {

extend: {},

},

plugins: [],

}

Finalmente, en el archivo css de tu proyecto, reemplaza todo el contenido existente con las siguientes oraciones (en nuestro caso, haremos este proceso en el archivo App.css):

@tailwind base;

@tailwind components;

@tailwind utilities;

Puedes probar que la instalación y configuración de Tailwind funcionaron creando una clase bg-gray-500 para el container  principal del proyecto. Si el fondo adquiere un color gris, significa que todo salió bien y que Tailwind se instaló e implementó correctamente. De lo contrario, ve el tutorial directamente en el sitio de Tailwind. No olvides eliminar la clase bg-gray-500 después de verificar que el framework funcionó, ¿de acuerdo?

Creación de un carrusel con botones de navegación

Llegamos al momento que todos esperábamos: por fin, con todo configurado y preparado, daremos los primeros pasos para construir nuestro carrusel. ¿Qué tal si comenzamos creando un componente llamado Carousel e insertando en él una lista de imágenes que usaremos para alternar la visualización de acuerdo con la interacción del usuario?

En el elemento section que se puede ver en la figura 2, usamos las clases Tailwind para, respectivamente, hacer que el elemento ocupe el 100% del ancho de la pantalla (w-full) y tenga una altura del tamaño de la pantalla de visualización (h-screen).

También usamos la clase flex para centrar verticalmente los botones con la clase items-center. En el div que está dentro del elemento de sección, usamos la clase flex para alinear todos los elementos uno al lado del otro, como se muestra en la figura 4. Sin embargo, esto todavía no es lo que queremos, ¿verdad?

¿Qué tal si creamos dos botones que avanzarán y devolverán los elementos que se mostrarán en la pantalla?

En el elemento div en el que se incluyen los botones, insertamos la clase absolute para superponer el botón en los elementos de imagen existentes en el carrusel. También usamos la clase flex para centrar verticalmente los botones con la clase items-center. Finalmente, informamos con h-full que el elemento tendrá la altura total dada por el elemento que lo contiene.

En cuanto al botón, creamos un espaciado interno horizontal y vertical con las clases px-2 y py-4, así como un margen exterior para compensar ligeramente ambos botones con las clases mr-1 y ml-2. Ten en cuenta también que, hasta entonces, los botones, al hacer clic, ejecutan las funciones previous y next, que todavía no tienen nada: todo a su debido tiempo, ¡paciencia!

Una vez creados los botones y elementos del carrusel, trasladaremos el scroll de navegación dentro del elemento principal que contiene las imágenes. De esta forma, nuestra página solo tendrá el ancho total de la pantalla y el elemento que la exceda. Velo aquí:

Logramos hacer esto a través de las clases overflow-x-scroll y scroll-smooth. El primero crea un desplazamiento para el elemento en el eje X y el segundo suaviza la navegación y la transición entre elementos dentro del desplazamiento.

Ahora necesitamos usar un hook useRef que, entre sus atribuciones, nos permita crear referencias a un elemento determinado. Para ello, lo importaremos desde React y crearemos una constante que recibirá la llamada a esta función, que en un principio tendrá valor nulo. Posteriormente, agregaremos esta referencia al elemento que contiene las imágenes a través de la propiedad ref:

Ahora, solo necesitamos vincular los botones con esta referencia creada. Si usas console.log en refCarousel, verás que se retorna un objeto con una clave actual. Dentro de él hay un rango de otras claves, de las cuales solo nos centraremos en scrollLeft.

ScrollLeft almacena la posición del scroll que creamos, relativa a la izquierda. Esto es lo que cambiaremos cada vez que se creen los botones, aumentando o disminuyendo una cierta cantidad de la posición de acuerdo con cada botón en el que se haga clic.

Considera que ahora ya no necesitamos mover el scroll para navegar entre los elementos, ya que los botones hacen esto cuando hacemos clic en ellos. Sin embargo, todavía queda un pequeño detalle: no queremos que el scroll siga apareciendo, ¿verdad?

Para ocultarlo, simplemente reemplaza la clase overflow-x-scroll con overflow-x-hidden en el elemento div que contiene las imágenes.

Creando la navegación automática en el carrusel

Hemos completado un carrusel que se basa en botones para navegar entre sus elementos, pero ¿y si en lugar de botones, quisiéramos que nuestro carrusel se moviera automáticamente? Para ello, utilizaremos el hook useEffect y la función setInterval.

El hook useEffect se utiliza para llevar el concepto y la aplicación del ciclo de vida del componente a la creación de componentes de funciones. Toma dos argumentos como parámetros, siendo el primero una función y el segundo un parámetro opcional. En este segundo parámetro, usaremos un array vacío para que useEffect se ejecute solo una vez cuando se ensambla el componente. De esta manera, tan pronto como se cargue nuestra aplicación, se ejecutará la función dentro de useEffect.

En su interior usaremos setInterval, una función de JavaScript que nos permite ejecutar una determinada acción en cada período determinado. Luego haremos que el scroll se mueva cada segundo. Si llegas al final de la pantalla, volverás al principio.

Consideraciones finales

Hoy vimos las dos formas más comunes de implementar carruseles: una con botones para la navegación y otra con navegación automática entre sus elementos.

Es importante tener en cuenta que ésta es solo una de las formas de crear este tipo de componente sin usar bibliotecas o frameworks que no sean React y Tailwind, respectivamente, ¡pero siéntete libre de dejar fluir tu imaginación y creatividad para pensar en otras formas!

¡Todo el éxito!