Posted onMay 24, 2022

¿Cómo crear un Carrusel con Next y Chakra UI?

En este post, vamos a desarrollar un Carrusel utilizando la libreríaEmbla Carousel, el frameworkNext.js y la libreríaChakra UI - esta última, al igual que Next.js, desarrollada porVercel y la comunidad Open Source.

A lo largo del post, aprenderemos:

Por qué elegir Embla Carousel
Cómo integrar Embla Carousel a tu proyecto en Next.js y Chakra UI
Cómo agregar paginación a tu Carousel

Si querés ir directamente alrepositorio en GitHub puedes hacerlo desdeaquí

¿Qué es Embla Carousel?

Embla Carousel es unalibrería agnóstica que, como su nombre lo indica, facilita la construcción de carruseles. Su uso garantiza fluidez y precisión tanto en el movimiento como deslizamiento de los elementos (slides) que componen al carrusel. Es una libreríadependency-free y liviana, por lo que su instalación es rápida y posee una baja dependencia de otras librerías para su funcionamiento.

De muyfácil integración a tu proyecto, con unaAPI muy bien documentada y una extensa lista deplugins que permiten potenciar las funciones de tu componente carrusel.

Por último, Embla Carousel funciona en todos los navegadores modernos, incluidoIE11.

Configurar nuestro proyecto

Crea un proyecto nuevo utilizando el comandocreate-next-app:

npx create-next-app my-awesome-embla-carousel

Una vez creado el proyecto y dentro del mismo, vamos a continuar instalando las dependencias necesarias para integrarChakra UI. Según ladocumentación oficial:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6# oryarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Por último, pero no menos importante, vamos a agregar a nuestro proyecto la versión de la libreríaEmbla Carousel para React:

npminstallembla-carousel-react--save

Hasta el momento, tu archivopackage.json debería verse de la siguiente manera:

Recuerda que lasversiones de las dependencias pueden variar. Al momento de escribir este post, la versión de la librería Embla Carousel React es la6.2.0

Estructura básica del componente Carousel

Para su integración con React, Embla Carousel provee elhookuseEmblaCarousel. El mismo devuelve dos parámetros, lareferencia al carrusel que luego será utilizada en la composición visual de nuestro componente y laAPI que nos dará acceso a todos los métodos disponibles.

importuseEmblaCarouselfrom'embla-carousel-react'const[emblaRef,emblaApi]=useEmblaCarousel()

A su vez,useEmblaCarousel permite la asignación deopciones globales a nuestro carrusel. A modo de ejemplo:

const[emblaRef,embla]=useEmblaCarousel({// alinea el primer slide al principio del viewport,// caso contrario, por defecto, lo hará en el medioalign:"start",// si el carrusel llegá al final retorna// automáticamente al primer slideloop:true,// determina si el usuario puede desplazar los slides// a través del mouse u otra interacción. Por defecto: truedraggable:false,// determina la velocidad de desplazamiento entre slides.speed:15,// ... más opciones globales});

la asignación deopciones globales debe realizarse por única vez y hacerse antes de inicializar el carrusel. Caso contrario, re asignar opciones globales puede producir efectos inesperados en el comportamiento del componente carrusel.

Para una lista detallada de las opciones globales posibles, consultaraquí.

Por otro lado, lacomposición visual de nuestro carrusel va a requerir de una estructura básica detres elementos - o sub componentes:

Viewport

Elhook nos da una referencia para asociar al elemento envolvente - padre -, necesario para manipular el excedente o desbordamiento con la propiedadoverflow:hidden

Container

Un contenedor que encerrará todos losslides del carrusel bajo la propiedadflex-row

Slides

Tendrá un listado con cadaslide de nuestro carrusel

Comencemos a programar

Hasta ahora:

Aprendimos qué es Embla Carousel
Instalamos un proyecto Next.js
Limpiamos la estructura de nuestro proyecto
Agregamos las dependencias necesarias de Embla Carousel y Chakra UI

¡Es hora de empezar a trabajar con código! Vamos a construir uncarrusel con repositorios de proyectos bajo distintas tecnologías y programadores. La información para completar cada slide - imagen, desarrollador, titulo, indicadores, descripción, ect - puede ser consumida de forma local o directamente desde una API. En nuestro caso, usaremos unarchivo localrepositories.js al proyecto que provee un arreglo de objetos con toda la información necesaria. Para la navegación entre losslides usaremos de ejemplo unapaginación de puntos (dot's type pagination).

Nuestro archivoindex.jsx debería verse de la siguiente manera:

import{ChakraProvider}from'@chakra-ui/react'importuseEmblaCarouselfrom'embla-carousel-react'import{useEffect,useCallback,useState}from'react'import{Container,Flex,Heading,Button,Box}from'@chakra-ui/react'importSlideImagefrom'../components/SlideImage'importSlideDetailsfrom'../components/SlideDetails'importrepositoriesfrom'../../repositories'constEmblaCarousel=()=>{const[emblaRef,emblaApi]=useEmblaCarousel({loop:false})const[scrollSnaps,setScrollSnaps]=useState([]);const[selectedIndex,setSelectedIndex]=useState(0);/*    * función que a través de la API de Embla Carousel   * y el método scrollTo permite navegar al índice   * correspondiente al "dot" de la navegación   */constscrollTo=useCallback((index)=>emblaApi&&emblaApi.scrollTo(index),[emblaApi]);/*   * función que actualiza el estado del índice   * correspondiente al slide actual     */constonSelect=useCallback(()=>{if(!emblaApi)return;setSelectedIndex(emblaApi.selectedScrollSnap);},[emblaApi,setSelectedIndex]);/*   * por cada re-renderizado del componente nos aseguramos que   * la librería Embla esté "montada" correctamente   */useEffect(()=>{if(!emblaApi)return;onSelect();setScrollSnaps(emblaApi.scrollSnapList);emblaApi.on("select",onSelect);},[emblaApi,setScrollSnaps,onSelect]);return({/* código de renderizado detallado abajo */})}exportdefaultEmblaCarousel

Seguimos sumando código a nuestro archivoindex.jsx, ahora el encargado de renderiza el elemento Carrusel:

return(<ChakraProvider><Boxbg="#030c1b"minHeight="100vh"><ContainermaxW="100%"py={10}><HeadingtextAlign="center"color="white">MyawesomeEmblaCarouselusing+NextJS+Chakra</Heading></Container>{/* Viewport */}<Boxoverflow="hidden"maxW="100%"p={0}ref={emblaRef}>{/* Container */}<Flexh='auto'py={[0,5,5]}>{/* Slides */}{repositories.map(repo=>{return(<Flexkey={repo.id}direction={{base:'column',md:'row'}}justifyContent="center"position="relative"flex="0 0 100%"><SlideImageimageSrc={repo.imgSrc}/><SlideDetailsitem={repo}/></Flex>)})}</Flex></Box></Box></ChakraProvider>)

Considere que los componentesSlideImage ySlideDetails tienen el objetivo de agregarle sentido en términos tanto de diseño como de contenido al carrrusel. Si lo desean podrán descargarlos directamente desdeacá, sino, podrán crear su propio contenido y diseño.

Las imágenes utilizadas, pueden descargarse también del repositorio desdeaquí. Las mismas están ubicadas en la carpetapublic/images de Next.js,destinada para servir archivos estáticos.

Hasta ahora, le hemos dado estilo a nuestro componente carrusel de repositorios, donde cadaslide posee una imagen a la izquierda y detalles del repositorio a la derecha. Además, el componente ocupará el 100% de laviewport por lo que se mostrará de a unslide a la vez.

Por último, nos queda agregar elsistema de paginación de puntos. El mismo nos da una idea de la cantidad de elementos - slides - que posee el carrusel y a la vez provee una herramienta práctica para desplazarse entre cadaslide.

Agregamos el siguiente código al final de nuestro archivoindex.jsx, dentro del provedor de contexto de Chakra UI(ChakraProvider):

return(<ChakraProvider>{/* código correspondiente al elemento carrusel */}<ContainermaxW="container.xl"py={10}><FlexjustifyContent="center"alignItems="center"mt={5}>{scrollSnaps.map((_,idx)=>(<Buttonw={2}h={2}mx={1}size="3"bg={idx===selectedIndex?"yellow.500":"gray.300"}key={idx}onClick={()=>scrollTo(idx)}/>))}</Flex></Container></ChakraProvider>)