Crea un carrusel en React con Swiper
En el universo del desarrollo web, existen muchos conceptos esenciales que necesitan estar presentes en el currículo del programador que busca ingresar al mercado laboral.
Saber crear barras de navegación, menús flotantes o expandibles, encabezados y pies de página son ejemplos de componentización que el desarrollador debe dominar con la punta de los dedos y la lengua, ya que casi todas las aplicaciones existentes cuentan con estos componentes para una buena funcionalidad, organización y aceptación por parte del usuario final.
Entre estos conocimientos esenciales, nos adentraremos en el mundo de los carruseles aplicados a React utilizando un sorprendente framework llamado Swiper.
¿Qué son los carruseles? No son los parque, ¿o sí?
Te explico. Carrusel es el nombre dado a la presentación de información en pantalla de forma rítmica y organizada hasta el punto de que, en una lista que contiene varios elementos, solo se presentan unos pocos a la vez, según la configuración realizada por el programador, alternando y haciéndose visible en pantalla a través de la interacción del usuario.
La organización y belleza de la presentación de conjuntos de datos con carruseles hacen que este tipo de componente se utilice ampliamente en casi todas las aplicaciones web. Después de todo, ¿quién nunca ha tratado e interactuado con uno en una red social o en un sitio de comercio electrónico? Bueno, hoy es el día para aprender con la ayuda de Swiper cómo se crean, diseñan e implementan los carruseles.
¿Y qué es Swiper?
Swiper es un framework JavaScript creado y utilizado para la presentación en forma de diapositivas de una forma moderna, estilizada y fácil de implementar, disponible en Angular, Vue, Solid, Svelte y, por supuesto, React, que lo trataremos en este artículo.
Es un marco muy completo, que proporciona transiciones y efectos de alternancia, efectos 3D y de paralaje, paginación, navegación, desplazamiento automático, etc. Sin embargo, sin más preámbulos, ¿qué tal si salimos un poco del campo de los conceptos y nos ensuciamos las manos?
Paso a paso
1 - Crear un proyecto React
En primer lugar, el primer paso (como se esperaba) es crear una aplicación React. Por lo tanto, nombremos nuestro primer proyecto usando Swiper con algo intuitivo. ¿Qué tal carrusel-en-react?
npx create-react-app carrusel-en-react
cd carrusel-en-react
npm start
2 - Instalación de Swiper
La instalación de Swiper es muy intuitiva. Simplemente ejecuta el siguiente comando dentro de la carpeta raíz del proyecto creado:
npm install swiper
3 - Crear un componente e importar Swiper
Basado en el concepto de desarrollo de React, cuanto más "componentes" tenga tu aplicación web, más efectiva y reutilizable será. De esta forma, crearemos un componente llamado Carrusel usando el concepto de clases (si prefieres usar funciones en lugar de clases, no hay problema, ya que la implementación de Swiper será la misma).
Comenzaremos importando algunos componentes y archivos necesarios para que Swiper funcione correctamente:
- Primero, importaremos el componente Swiper desde 'swiper/react'. Es dentro de esto que crearemos la presentación del elemento en modo carrusel;
- Finalmente, importaremos el archivo css básico de swiper: Swiper tiene archivos css que hacen que la magia del estilo suceda detrás de escena; para este comienzo, simplemente importe el archivo ‘swiper/css’.
Fácil, ¿no? Sin embargo, si intentaste ejecutarlo en tu navegador, no se mostró nada. Esto sucede porque aún no hemos creado los elementos que se mostrarán a través del carrusel. Eso es lo que haremos en el siguiente paso.
4 - Creación de los elementos que se mostrarán en el carrusel
Como ya se mencionó, dentro del componente Swiper crearemos cada elemento que se mostrará en el formato de carrusel. Para que el marco comprenda que una determinada pieza de código o componente representa un elemento para el carrusel, debemos envolverlo con el componente SwiperSlide, que también debe importarse desde ‘swiper/react’, al igual que el componente Swiper.
Sin embargo, no hay qué preocuparse ni ceñirse a lo configurado en ellos: organizar el estilo interno de lo que se debe presentar en cada elemento del carrusel es una tarea específica para cada tipo de situación.
Ya podemos ver cuán efectivo es Swiper cuando hacemos tan poco, considerando la cantidad de comentarios visuales que ya tenemos disponibles. Pero calma, ¡esto es solo el principio! ¡Swiper brinda muchas más herramientas y conoceremos las más importantes y esenciales para crear un carrusel profesional! ¿Seguimos?
5 - Principales herramientas de Swiper
A partir de ahora todo lo que vamos a hacer es puro capricho. Los ajustes presentados deben ser utilizados de acuerdo con la necesidad de cada aplicación, no dependiendo necesariamente unos de otros. ¿Lo hacemos?
5.1 Navegación y paginación
Las herramientas de Navegación y Paginación son los primeros comandos que se presentan porque, de hecho, son las más utilizados en los carruseles. Mientras que la Navegación habilita dos botones en la pantalla para que el usuario haga clic y cambie los elementos que se muestran en la pantalla (ya sea al elemento siguiente o al elemento anterior), la Paginación proporciona una guía (en la que se puede hacer clic o no) de cuántas páginas tiene ese carrusel. Cada página tiene una serie de elementos según la configuración de nuestra aplicación.
Para usar estas dos herramientas, comenzamos importando sus respectivos componentes 'swiper', así como sus respectivos archivos CSS como se muestra en la imagen:
Una vez que se importan estos elementos, debemos informar a Swiper que estamos utilizando estos componentes en el carrusel que estamos creando. Esta configuración se realiza mediante la creación de una propiedad en el componente Swiper llamada modules, que recibirá un array con Navegación y Paginación como valor:
El siguiente paso es informar cómo queremos que se muestre y organice cada elemento en la pantalla. Para ello, creamos nuevas propiedades en el componente Swiper, denominadas paginación (pagination) y navegación (navigation).
Para la navegación, basta con pasar el valor true o false: según la información (true para positivo y false para negativo), los botones de navegación estarán disponibles en la pantalla. En cuanto a paginación, además de la posibilidad de pasar también un valor booleano para habilitar o deshabilitar la paginación que se muestra en pantalla, también es posible informar si es interactivo al hacer clic o no. Para ello, pasamos un objeto con la clave clicable y el valor booleano true o false.
Simplemente crea en el archivo css las clases swiper-pagination-bullet (icono de cada página), swiper-pagination-bullet-active (icono de página activa), swiper-button-prev (botón de navegación para mostrar la paginación del carrusel anterior) y swiper-button-next (botón de navegación para mostrar la siguiente paginación del carrusel), como se ejemplifica en la figura 10.
5.2 Autoplay
No siempre queremos que los elementos dispuestos en un carrusel solo se cambien cuando hay alguna interacción del usuario. Para que cambien automáticamente en la pantalla, usamos el componente Autoplay.
La forma en que implementamos el componente de reproducción automática es similar a lo hecho para la navegación y la paginación: primero importamos el componente de reproducción automática desde 'swiper', luego lo agregamos en la propiedad de los modules y finalmente definimos el retraso de alternancia entre elementos pasando un objeto con la clave de retraso y valor igual al tiempo (en milisegundos) para la propiedad llamada reproducción automática, dentro del componente Swiper:
5.3 Dirección
Es posible definir en cuál dirección queremos que se mueva nuestro carrusel. A través de la propiedad direction también en el componente Swiper, es posible informar si queremos la dirección horizontal o vertical. De forma predeterminada, los elementos se desplazan en modo horizontal hacia el lado izquierdo y en modo vertical de abajo hacia arriba:
5.4 SlidesPerView y loop
Finalizando las herramientas principales de Swiper, tenemos las propiedades slidesPerView y loop. Mientras que slidesPerView define cuántos elementos estarán visibles y dispuestos en la pantalla a la vez, loop garantiza que, al llegar al final de la lista de elementos del carrusel, el siguiente botón no se desactivará. En cambio, al hacer clic en él, volverá al primer elemento de la lista. El botón Atrás se comporta de la misma manera si llega al primer elemento de la pantalla: al hacer clic en él, avanzará al último elemento de la lista. De esta forma, finalmente llegamos al modelo final de nuestro carrusel:
Conclusión
Todo proceso de aprendizaje es un proceso largo y, en el mundo de la programación, siempre implica práctica. Si no lo lograste al principio, revisa cada uno de los pasos de este tutorial e inténtalo de nuevo, ¡porque sin duda lo lograrás!
Es importante tener en cuenta que esto fue solo una muestra de lo que Swiper puede ofrecer a quienes lo usan, por supuesto, ya que es una gran herramienta con muchas formas diferentes de crear y diseñar carruseles.
Aquí aprendiste todas las herramientas básicas para presentar elementos e información, pero no te limites a eso: ¡consulta la documentación de Swiper y aprende más y más! Al hacer clic aquí, accederás al sitio web de Swiper, donde se encuentran disponibles algunas demostraciones de las posibilidades de Swiper.
¡Hasta pronto!
Revelo Content Network da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.