Carrousel réactif utilisant React

  2. HowTo
  3. React Howtos
  4. Carrousel réactif utilisant React
Oluwafisayo Oluwatayo 30 janvier 2023
React React Material UI
  1. Carrousel réactif utilisant React Slick
  2. Carrousel réactif utilisant des crochets React
  3. Carrousel réactif utilisant React Material-UI
  4. Conclusion
Carrousel réactif utilisant React

Le carrousel React est un effet qui nous permet d’afficher des éléments sous forme de diapositives. De cette façon, nous pouvons facilement afficher plusieurs éléments sans avoir à faire défiler la page de haut en bas car les éléments que nous souhaitons voir se déroulent les uns après les autres.

Cette conception impressionnante est idéale pour les sites Web de commerce électronique. C’est une belle façon d’afficher les produits en une seule fois.

De plus, pour quelqu’un qui a l’intention de créer un portefeuille, l’effet carrousel est excellent pour permettre aux visiteurs du site Web de voir les services offerts sans stress.

Il existe différentes façons d’utiliser cet effet de glissement dans React. Nous pouvons utiliser le carrousel avec des boutons fléchés, afin que les utilisateurs puissent cliquer manuellement vers l’avant ou vers l’arrière pour voir les éléments.

Nous pourrions le rendre automatique, où les éléments sont affichés automatiquement du début à la fin, puis recommencent, comme une boucle.

Alors, pour aller de l’avant, examinons différentes méthodes pour appeler cette fonction dans le framework React.

Carrousel réactif utilisant React Slick

Cet exemple utilise la dépendance react-slick pour fonctionner. Après avoir créé un nouveau dossier de projet, nous passons au dossier de projet dans notre terminal et installons la bibliothèque. Nous utiliserons npm install react-slick --save pour installer.

Il faut aussi installer le slick-carousel de React ; cela nous permettra de configurer le CSS et les polices du carrousel. Nous allons installer cette dépendance avec npm install slick-carousel.

Ensuite nous allons créer deux dossiers : un pour le carrousel, et l’autre pour l’aspect CSS. Nous allons créer le dossier Composants ; à l’intérieur, nous allons créer le Slider.js.

Ensuite, nous créons un autre dossier ; nous appellerons cela css. Et nous allons créer le fichier App.scss à l’intérieur.

Ensuite, nous passons au fichier Slider.js et saisissons ces codes :

Extrait de code (Slider.js) :

import React from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";


function ImageSlider() {
    let settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        cssEase: "linear"
    }
    return (
        <Slider {...settings}>
            <div className="card-wrapper">
                <div className="card">
                    <div className="card-image">
                        <img src="images/1.jpg" />
                    </div>
                    <ul className="social-icons">
                        <li><a href="#"><i className="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i className="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i className="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i className="fa fa-dribbble"></i></a></li>
                    </ul>
                    <div className="details">
                        <h2>BMW <span className="job-title">M5</span></h2>
                    </div>
                </div>
            </div>
            <div className="card-wrapper">
                <div className="card">
                    <div className="card-image">
                        <img src="images/2.png" />
                    </div>
                    <ul className="social-icons">
                        <li><a href="#"><i className="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i className="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i className="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i className="fa fa-dribbble"></i></a></li>
                    </ul>
                    <div className="details">
                        <h2>Graphic <span className="job-title">Design</span></h2>
                    </div>
                </div>
            </div>
            <div className="card-wrapper">
                <div className="card">
                    <div className="card-image">
                        <img src="images/3.png" />
                    </div>
                    <ul className="social-icons">
                        <li><a href="#"><i className="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i className="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i className="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i className="fa fa-dribbble"></i></a></li>
                    </ul>
                    <div className="details">
                        <h2>Embrace<span className="job-title">Your Darkness</span></h2>
                    </div>
                </div>
            </div>
            <div className="card-wrapper">
                <div className="card">
                    <div className="card-image">
                        <img src="images/4.jpg" />
                    </div>
                    <ul className="social-icons">
                        <li><a href="#"><i className="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i className="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i className="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i className="fa fa-dribbble"></i></a></li>
                    </ul>
                    <div className="details">
                        <h2>ML <span className="job-title">Fashion</span></h2>
                    </div>
                </div>
            </div>
        </Slider>
    )
}

export default ImageSlider

Nous créons des composants qui incluent les données et les images des éléments que nous voulons utiliser, puis nous enveloppons le tout dans la balise <Slider></Slider>. Il s’agit de la bibliothèque carrousel que nous avons installée précédemment.

Ensuite, on va dans le dossier App.js pour écrire ces bouts de codes :

Extrait de code (App.js) :

import ImageSlider from "./Components/Slider";
import "./css/App.css"
function App() {
  return (
    <div className="container mt-5 carousel">
      <h1 className="slider_title">React Image Carousel</h1>
      <ImageSlider />
    </div>
  );
}

export default App;

Parce que le carrousel est une sorte de conception d’effets pour les pages Web, l’aspect CSS est une partie essentielle de la configuration. Nous ferons beaucoup de CSS pour contrôler la façon dont chaque image se déplace et combien de temps il faut pour transiter.

Extrait de code (App.scss) :

* {
    margin: 0;
    padding: 0;
  }

  body {
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: "Raleway", sans-serif;
    position: relative;
    background: #333;
  }

  .slider_title {
    font-size: 5vw;
    color: tomato;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2vw;
  }

  .card-wrapper {
    position: relative;
    width: 100%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .card-wrapper:active, .card-wrapper:hover, .card-wrapper:focus {
    outline: none;
    border: none;
  }

  .card {
    width: 100%;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }

  .card .card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #000;
    -webkit-transition: .5s;
    transition: .5s;
  }

  .card .card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .card:hover img {
    opacity: .4;
    -webkit-transition: .5s;
    transition: .5s;
  }

  .card:hover .card-image {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
    -webkit-transition: all .9s;
    transition: all .9s;
  }

  .social-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .social-icons li {
    list-style: none;
  }

  .social-icons li a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #fff;
    font-size: 23px;
    color: #333;
    font-weight: bold;
    margin: 0 6px;
    -webkit-transition: .4s;
    transition: .4s;
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
    opacity: 0;
  }

  .card:hover .social-icons li a {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }

  .social-icons li a:hover {
    background: #000;
    -webkit-transition: .2s;
    transition: .2s;
  }

  .social-icons li a:hover .fa {
    color: #fff;
  }

  .social-icons li a .fa {
    -webkit-transition: .8s;
    transition: .8s;
  }

  .social-icons li a .fa:hover {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
    color: #fff;
  }

  .card:hover li:nth-child(1) a {
    -webkit-transition-delay: .1s;
            transition-delay: .1s;
  }

  .card:hover li:nth-child(2) a {
    -webkit-transition-delay: .2s;
            transition-delay: .2s;
  }

  .card:hover li:nth-child(3) a {
    -webkit-transition-delay: .3s;
            transition-delay: .3s;
  }

  .card:hover li:nth-child(4) a {
    -webkit-transition-delay: .4s;
            transition-delay: .4s;
  }

  .details {
    position: absolute;
    bottom: 400px;
    left: 0;
    background: #fff;
    width: 100%;
    height: 120px;
    z-index: 1;
    padding: 10px;
    -webkit-transition: .6s;
    transition: .6s;
  }

  .details h2 {
    margin: 30px 0;
    padding: 0;
    text-align: center;
  }

  .details h2 .job-title {
    font-size: 16px;
    line-height: 2;
    color: #333;
    font-weight: 300;
    display: block;
  }

  .card:hover .details {
    bottom: 0;
  }

  .carousel .slick-dots {
    bottom: -2.5vw;
  }

  .carousel .slick-dots li button {
    width: 20px;
    height: 20px;
    border: 1px solid #fff;
    border-radius: 20px;
  }

  .carousel .slick-dots li button:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    content: "";
    text-align: center;
    opacity: .5;
    color: #000;
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }

  .carousel .slick-dots li.slick-active button, .carousel .slick-dots li:hover button {
    border-color: tomato;
  }

  .carousel .slick-dots li.slick-active button:before, .carousel .slick-dots li:hover button:before {
    background-color: tomato;
    opacity: 1;
  }

  .carousel .slick-prev, .carousel .slick-next {
    width: 50px;
    height: 50px;
    background-color: #fff;
  }

  .carousel .slick-prev:hover, .carousel .slick-prev:focus, .carousel .slick-next:hover, .carousel .slick-next:focus {
    color: #fff;
    outline:
   none;
    background: #fff;
  }

  .carousel .slick-prev:before, .carousel .slick-next:before {
    color: #000;
    font-family: "Raleway", sans-serif;
  }

  .carousel .slick-next {
    right: -55px;
  }

  .carousel .slick-prev {
    left: -55px;
  }

Nous définissons également la taille de l’image dans le CSS. Nous définissons également comment afficher les informations ajoutées aux images et à la police.

Production:

Carrousel réactif utilisant React Slick

Carrousel réactif utilisant des crochets React

Dans cet exemple, nous utiliserons le crochet useState de React, car il aide à basculer entre les valeurs, ce qui se produit avec l’effet carrousel.

Après avoir créé un nouveau projet React, nous devons installer la bibliothèque react-icons à l’aide de npm install react-icons. Cette dépendance nous fournira les icônes de flèche gauche et droite que nous utiliserons pour glisser entre les images.

Ensuite, nous naviguons vers le dossier src dans les dossiers du projet et créons un nouveau dossier appelé components. Nous allons créer deux fichiers à l’intérieur, à savoir : SliderData.js et ImageSlider.

On passe à l’aspect codage, d’abord avec le ImageSlider.js :

Extrait de code (ImageSlider.js) :

import React, { useState } from 'react';
import { SliderData } from './SliderData';
import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from 'react-icons/fa';

const ImageSlider = ({ slides }) => {
  const [current, setCurrent] = useState(0);
  const length = slides.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  if (!Array.isArray(slides) || slides.length <= 0) {
    return null;
  }

  return (
    <section className='slider'>
      <FaArrowAltCircleLeft className='left-arrow' onClick={prevSlide} />
      <FaArrowAltCircleRight className='right-arrow' onClick={nextSlide} />
      {SliderData.map((slide, index) => {
        return (
          <div
            className={index === current ? 'slide active' : 'slide'}
            key={index}>
            {index === current && (
              <img src={slide.image} alt='travel image' className='image' />
            )}
          </div>
        );
      })}
    </section>
  );
};

export default ImageSlider;

En appliquant la fonction useState, nous définissons le nextSlide pour augmenter, c’est-à-dire passer à l’élément suivant, tandis que le prevSlide fait exactement le contraire. Ensuite, nous appelons l’écouteur d’événement onClick pour activer ces fonctions chaque fois que leurs flèches correspondantes sont cliquées.

Pour aller de l’avant, nous nous dirigeons vers le SliderData.js. C’est là que nous créons un tableau des images que nous voulons afficher avec l’effet carrousel.

Extrait de code (SliderData.js) :

export const SliderData = [
    {
        image:
            'https://images.unsplash.com/photo-1546768292-fb12f6c92568?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
    },
    {
        image:
            'https://images.unsplash.com/photo-1501446529957-6226bd447c46?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1489&q=80'
    },
    {
        image:
            'https://images.unsplash.com/photo-1483729558449-99ef09a8c325?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'
    },
    {
        image:
            'https://images.unsplash.com/photo-1475189778702-5ec9941484ae?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1351&q=80'
    },
    {
        image:
            'https://images.unsplash.com/photo-1503177119275-0aa32b3a9368?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'
    }
];

Ensuite, nous nous dirigeons vers App.js et ajoutons un peu de code :

Extrait de code (App.js) :

import './App.css';
import ImageSlider from './components/ImageSlider';
import { SliderData } from './components/SliderData';

function App() {
  return <ImageSlider slides={SliderData} />;
}

export default App;

Le CSS mentionné précédemment joue un rôle essentiel pour s’assurer que l’effet carrousel fonctionne comme souhaité, nous nous dirigeons donc vers le fichier App.css et faisons quelques ajustements :

Extrait de code (App.css) :

.slider {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 1000px;
  height: 600px;
  border-radius: 10px;
}

.right-arrow {
  position: absolute;
  top: 50%;
  right: 32px;
  font-size: 3rem;
  color: #000;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.left-arrow {
  position: absolute;
  top: 50%;
  left: 32px;
  font-size: 3rem;
  color: #000;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.slide {
  opacity: 0;
  transition-duration: 1s ease;
}

.slide.active {
  opacity: 1;
  transition-duration: 1s;
  transform: scale(1.08);
}

L’effet carrousel devrait parfaitement fonctionner lorsque nous mettons tous ces codes comme indiqué.

Production:

Carrousel réactif utilisant des crochets React

Carrousel réactif utilisant React Material-UI

React Material-UI est une bibliothèque de fonctionnalités que nous allons déployer pour configurer les flèches de navigation du carrousel de réaction, puis nous utiliserons les crochets d’état de réaction pour terminer le travail.

Après avoir créé un nouveau projet, nous installons ensuite le material-UI avec npm install @material-ui/core et npm install @material-ui/icons.

Maintenant, nous nous dirigeons vers src et créons 3 dossiers, Components, Helpers et Images. Nous allons créer Carousel.js et Carousel.css dans le dossier Components.

Nous allons créer CarouselData.js dans le dossier Helpers et placer les images dans le dossier Images. Nous commençons par le dossier Carousel.js et saisissons ces codes :

Extrait de code (Carousel.js) :

import React, { useState } from "react";
import "./Carousel.css";
import { images } from "../Helpers/CarouselData";
import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";

function Carousel() {
  const [currImg, setCurrImg] = useState(0);

  return (
    <div className="carousel">
      <div
        className="carouselInner"
        style={{ backgroundImage: `url(${images[currImg].img})` }}
      >
        <div
          className="left"
          onClick={() => {
            currImg > 0 && setCurrImg(currImg - 1);
          }}
        >
          <ArrowBackIosIcon style={{ fontSize: 30 }} />
        </div>
        <div className="center">
          <h1>{images[currImg].title}</h1>
          <p>{images[currImg].subtitle}</p>
        </div>
        <div
          className="right"
          onClick={() => {
            currImg < images.length - 1 && setCurrImg(currImg + 1);
          }}
        >
          <ArrowForwardIosIcon style={{ fontSize: 30 }} />
        </div>
      </div>
    </div>
  );
}

export default Carousel;

C’est là que nous définissons toutes les opérations de navigation à l’aide de useState pour définir ce qui se passe lorsque nous cliquons sur l’une des flèches, ce qui déclenche l’écouteur d’événement onClick.

Puis on fixe le CSS correspondant à l’aide du Carousel.css :

Extrait de code (Carousel.css) :

.carousel {
    width: 60%;
    height: 700px;
    background-color: black;
}

.carouselInner {
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
}

.carouselInner .left {
    flex: 5%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    display: grid;
    place-items: center;
    color: white;
    cursor: pointer;
}

.carouselInner .center {
    flex: 80%;
    height: 100%;
    display: grid;
    place-items: center;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    text-align-last: center;
}

h1 {
    font-size: 5rem;
}

p {
    font-size: 2rem;
}

h1, p {
    background-color: rgb(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 9px;
}

.carouselInner .right {
    flex: 5%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    display: grid;
    place-items: center;
    color: white;
    cursor: pointer;
}

Dans le dossier Helpers, nous avons le fichier CarouselData.js. Comme son nom l’indique, le fichier contient les images et autres informations que nous souhaitons afficher sur la page Web.

Extrait de code (CarouselData.js) :

import City from "../Images/city.jpg";
import Salvador from "../Images/salvador.jpg";
import Ubc from "../Images/ubc.jpg";

export const images = [
  { title: "San Diego",
  subtitle: "This is San Diego",
  img: City,
  },
  {
    title: "Salvador, Brazil",
    subtitle: "The Best City in the World",
    img: Salvador,
  },
  {
    title: "UBC (Vancouver)",
    subtitle: "The University of British Columbia",
    img: Ubc,
  },
];

Enfin, on fait un peu de codage en App.js. Ce fichier s’assure que notre projet est bien rendu.

Extrait de code (App.js) :

import "./App.css";
import Carousel from "./Components/Carousel";
import React from "react";
function App() {
  return (
    <div className="App">
      <Carousel />
    </div>
  );
}

export default App;

Production:

Carrousel réactif utilisant React Material-UI

Conclusion

L’effet carrousel embellit les pages Web, quelle que soit l’intention pour laquelle elles sont utilisées. Et le framework React fournit une plate-forme très flexible pour explorer de nombreuses façons d’obtenir les effets de diapositives et de les faire fonctionner sur nos applications Web.

Auteur: Oluwafisayo Oluwatayo
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn