Carrousel de réaction ⚛️ 🎠

Dans ce blog, nous verrons comment implémenter un curseur de carrousel en réaction. J'ai recréé un site Web pour une start-up technologique qui fournit ses produits à de nombreuses entreprises et affiche fièrement ces logos de marque sur leur site Web. Lors de la recréation du site, j'ai décidé d'afficher les marques sur un carrousel automatique, infini et permettant un balayage manuel.

Installation de React Slick 📥

J'ai utilisé une bibliothèque, appelée React Slick, pour obtenir le curseur du carrousel. Nous devons d'abord installer la bibliothèque en tapant ce qui suit dans notre ligne de commande :

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";

Maintenant, nous allons plonger en construisant notre curseur, que j'ai nommé le composant comme BrandSlideret à Sliderpartir duquel j'ai importé react-slickcomme suit :

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

Appel à toutes les images ! 🖼️

Pour chaque marque, j'ai trouvé des fichiers png du logo sur Google et les ai faits à peu près de la même taille et de la même couleur sur photoshop, pour coller au thème de l'entreprise. J'ai importé chaque image, puis créé un tableau que je vais mapper à l'intérieur du composant. Dans l'exemple ci-dessous, je n'ai pas ajouté les noms de marque mais juste Marque suivi d'un numéro.

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 (
  )
}

Nous allons maintenant déclarer une nouvelle variable d'état, que nous appellerons « imageIndex » et la définirons sur 0. Nous ajouterons ensuite notre code principal qui mappera le tableau comme indiqué ci-dessous :

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>
  )
}

Paramètres et style ⚙️ 🖌️

Nous ajouterons le classNamefor the divcomme opérateur ternaire pour exprimer quelle image est « active » (centrée) et quelles images ne le sont pas. Nous ajouterons également des paramètres pour configurer notre curseur (cela peut varier dans votre projet).

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;
}