React Carousel <0xE2><0x9A><0x9A><0x9A><0x9B>

このブログでは、reactにカルーセルスライダーを実装する方法を見ていきます。私は、多くのエンタープライズ ビジネスに製品を提供し、それらのブランド ロゴを誇らしげに表示するテクノロジー スタートアップの Web サイトを再作成しました。サイトを再作成するとき、私はブランドをカルーセルに表示することにしました。カルーセルは自動で無限で、手動でスワイプできます。

React Slickのインストール

React Slick というライブラリを使用して、カルーセル スライダーを実現しました。コマンドラインに以下を入力して、最初にライブラリをインストールする必要があります。

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

ここで、次のようにコンポーネントに名前を付け、そこからBrandSliderインポートSliderしたスライダーを構築していきreact-slickます。

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

すべての画像を呼び出す！飲料衣<0x96><0xBC><0xBC>

ブランドごとに、Googleでロゴのpngファイルを見つけ、フォトショップでほぼ同じサイズと色にして、会社のテーマに合わせました。各画像をインポートしてから、コンポーネント内でマッピングする配列を作成しました。以下の例では、私はブランド名を追加していないが、単にブランドは数字が続きます。

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

ここで、「imageIndex」と呼ばれる新しい状態変数を宣言し、それを 0 に設定します。次に、以下に示すように、配列をマップするメイン コードを追加します。

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

設定とスタイリング

どの画像が「アクティブ」 (中央)で、どの画像がそうでないかを表現するclassNameためにdiv、三項演算子としてを追加します。スライダーを構成するための設定も追加します (これはプロジェクトによって異なる場合があります)。

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