React Carousel ⚛️

W tym blogu przyjrzymy się, jak zaimplementować suwak karuzeli w reakcji. Odtworzyłem stronę internetową dla start-upu technologicznego, który dostarcza swoje produkty dla wielu firm i z dumą wyświetla logo marki na swojej stronie internetowej. Odtwarzając stronę, postanowiłem wyświetlać marki na karuzeli, która jest automatyczna, nieskończona i pozwala na ręczne przesuwanie.

Instalowanie React Slick 📥

Użyłem biblioteki o nazwie React Slick, aby uzyskać suwak karuzeli. Najpierw musimy zainstalować bibliotekę, wpisując poniższe w wierszu poleceń:

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

Teraz zanurkujemy, budując nasz suwak, który nazwałem komponentem BrandSlideri importując Sliderz niego react-slickw następujący sposób:

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

Dzwonię do wszystkich obrazów! 🖼️

Dla każdej marki znalazłem pliki png z logo w Google i zrobiłem je mniej więcej w tym samym rozmiarze i kolorze w Photoshopie, aby trzymać się motywu firmy. Zaimportowałem każdy obraz, a następnie utworzyłem tablicę, którą zmapuję wewnątrz komponentu. W poniższym przykładzie nie dodałem nazw marek, tylko markę i numer.

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

Zadeklarujemy teraz nową zmienną stanu, którą nazwiemy „ imageIndex” i ustawimy ją na 0. Następnie dodamy nasz główny kod, który będzie mapował tablicę, jak pokazano poniżej:

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

Ustawienia i stylizacja ⚙️ 🖌️

Dodamy classNamefor the divjako trójskładnikowy operator, aby wyrazić, który obraz jest „aktywny” (wyśrodkowany), a które nie. Dodamy również ustawienia, aby skonfigurować nasz slider (może się to różnić w Twoim projekcie).

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