Reaccionar carrusel ⚛️ 🎠

En este blog, veremos cómo implementar un control deslizante de carrusel en react. Recreé un sitio web para una nueva empresa tecnológica que ofrece sus productos a muchas empresas y muestra con orgullo esos logotipos de marca en su sitio web. Al recrear el sitio, decidí mostrar las marcas en un carrusel que es automático, infinito y permite deslizar manualmente.

Instalación de React Slick 📥

Usé una biblioteca, llamada React Slick, para lograr el control deslizante del carrusel. Primero debemos instalar la biblioteca escribiendo lo siguiente en nuestra línea de comando:

npm install react-slick --save

yarn add react-slick

npm install slick-carousel --save

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

Ahora, nos sumergiremos en la construcción de nuestro control deslizante, que he denominado el componente BrandSlidery Sliderdesde el cual importé de la react-slicksiguiente manera:

import React, { useState } from 'react';
import Slider from 'react-slick';
import '../../styling/brandslider.css';
const BrandSlider = () => {
  return (
  )
}

¡Llamando a todas las imágenes! 🖼️

Para cada marca, encontré archivos png del logotipo en Google y los hice aproximadamente del mismo tamaño y color en Photoshop, para seguir con el tema de la empresa. Importé cada imagen y luego creé una matriz que mapearé dentro del componente. En el siguiente ejemplo, no agregué los nombres de las marcas, sino solo la Marca seguida de un número.

import React, { useState } from 'react';
import Slider from 'react-slick';
import brandOne from '../../assets/Brand1Logo.png';
import brandTwo from '../../assets/Brand2Logo.png';
import brandThree from '../../assets/Brand3Logo.png';
import brandFour from '../../assets/Brand4Logo.png';
import brandFive from '../../assets/Brand5Logo.png';
import brandSix from '../../assets/Brand6Logo.png';
import brandSeven from '../../assets/Brand7Logo.png';
import brandEight from '../../assets/Brand8Logo.png';
import '../../styling/brandslider.css';
const images = [brandOne, brandTwo, brandThree, brandFour, brandFive, brandSix, brandSeven, brandEight];
const BrandSlider = () => {
  return (
  )
}

Ahora declararemos una nueva variable de estado, que llamaremos " imageIndex" y la estableceremos en 0. Luego agregaremos nuestro código principal que se mapeará a través del arreglo como se muestra a continuación:

import React, { useState } from 'react';
import Slider from 'react-slick';
import brandOne from '../../assets/Brand1Logo.png';
import brandTwo from '../../assets/Brand2Logo.png';
import brandThree from '../../assets/Brand3Logo.png';
import brandFour from '../../assets/Brand4Logo.png';
import brandFive from '../../assets/Brand5Logo.png';
import brandSix from '../../assets/Brand6Logo.png';
import brandSeven from '../../assets/Brand7Logo.png';
import brandEight from '../../assets/Brand8Logo.png';
import '../../styling/brandslider.css';
const images = [brandOne, brandTwo, brandThree, brandFour, brandFive, brandSix, brandSeven, brandEight];
const BrandSlider = () => {
  const [imageIndex, setImageIndex] = useState(0);
  return (
    <div className='slider'>
      <p>Empowering leading global brands</p>
      <Slider>
        {images.map((img) => (
          <div className='temp'>
            <img src={img} alt={img} />
          </div>
        ))}
      </Slider>
     </div>
  )
}

Configuración y estilo ⚙️ 🖌️

Agregaremos classNamefor the divcomo operador ternario para expresar qué imagen está 'activa' (centrada) y cuáles no. También agregaremos configuraciones para configurar nuestro control deslizante (esto puede variar en su proyecto).

import React, { useState } from 'react';
import Slider from 'react-slick';
import brandOne from '../../assets/Brand1Logo.png';
import brandTwo from '../../assets/Brand2Logo.png';
import brandThree from '../../assets/Brand3Logo.png';
import brandFour from '../../assets/Brand4Logo.png';
import brandFive from '../../assets/Brand5Logo.png';
import brandSix from '../../assets/Brand6Logo.png';
import brandSeven from '../../assets/Brand7Logo.png';
import brandEight from '../../assets/Brand8Logo.png';
import '../../styling/brandslider.css';
const images = [brandOne, brandTwo, brandThree, brandFour, brandFive, brandSix, brandSeven, brandEight];
const BrandSlider = () => {
  const [imageIndex, setImageIndex] = useState(0);
  const settings = {
    infinite: true,
    lazyload: true,
    speed: 500,
    slidesToShow: 5,
    centerMode: true,
    centerPadding: 0,
    autoplay: true,
    beforeChange: (current, next) => setImageIndex(next)
  };
  return (
    <div className='slider'>
      <p>Empowering leading global brands</p>
      <Slider {...settings}>
        {images.map((img, idx) => (
          <div className={idx === imageIndex ? "slide activeSlide" : "slide"}>
            <img src={img} alt={img} />
          </div>
        ))}
      </Slider>
    </div>
  )
}

.slide {
  transform: scale(0.5);
  transition: transform 300ms;
  opacity: 0.2;
}
.activeSlide {
  transform: scale(1.5);
  transition: transform 300ms;  
  opacity: 1;
}