反応スリックを使用して3次元回転木馬を作る

スライダーは、我々が一般的に閲覧するほとんどすべてのウェブサイトの重要な部分になりました.今日、我々はまた、小さな3 Dを構築するslider 反応スリックライブラリを使用して反応JSでは、ドキュメントを見つけることができますhere . それは非常に使いやすいですし、わずか数分で非常に魅力的なスライダを作成することができます.
次のコマンドを使用して新しい反応アプリを作成することから始めましょう.

npx create-react-app mySlider

次に、我々はロゴを削除する含まれている我々のアプリで必要なクリーンアップを行います.SVGと我々のアプリケーションのSRCフォルダからのテストファイル.
さて、slickライブラリを利用するために以下の依存関係をインストールする必要があります.また、我々のスライダーの次/前のアイコンに対して使用する反応アイコンをインストールします.

npm i react-icons react-slick slick-carousel

or

yarn add react-icons react-slick slick-carousel

今すぐアプリを開きましょう.JSファイルは、このファイルのヘッダー要素に書かれているすべてのコードを削除します.このアプリの目的のために、私は私はスライダーで使用されるいくつかの画像を維持しているSRCフォルダーの資産フォルダーを作成しました.
最初に我々は、アプリケーション内の資産フォルダーからスライダーコンポーネント(“反応スリック”から)と我々のイメージをインポートします.JSは以下の通り.

import Slider from "react-slick";
import pic1 from "./assets/Consulting-rafiki.png";
import pic2 from "./assets/Creative writing-rafiki.png";
import pic3 from "./assets/Football Goal-rafiki.png";
import pic4 from "./assets/Researchers-rafiki.png";
import pic5 from "./assets/User research-rafiki.png";

また、前から次の矢印をインポートするライブラリのアイコンをインポート:

import { FaArrowRight, FaArrowLeft } from "react-icons/fa";

さて、画像を簡単にマップして画面に表示するために、画像を配列に保存します.

const images = [pic1, pic2, pic3, pic4, pic5];

次に、私はスライダのコンポーネントを開き、マップを介して1つのマップのメソッドを使用してマップのメソッドを我々のアプリの戻り値の中にマップします.以下の方法でJS :

<div className="App">
      <h1>React 3D Slider</h1>
      <Slider>
        {images.map((img, idx) => (
          <div>   
            <img src={img} alt={idx} />
          </div>
        ))}
      </Slider>
    </div>

滑らかなライブラリでは、設定オブジェクトを初期化する必要があります.ここではスライダーのいくつかのルールを定義します.

const settings = {
  infinite:true, //to allow the slides to show infinitely
  lazyLoad: true,
  speed: 300, //this is the speed of slider in ms
  slidesToShow:3, //number of slides to show up on screen
  centerMode: true, 
  centerPadding: 0,
  nextArrow: <NextArrow />, //imported from 'react-icons'
  prevArrow: <PrevArrow />, //imported from 'react-icons'
};

さて、画像を1つずつ繰り返すために、イメージインデックスを作成し、最初にゼロに設定します.

const [imgIndex,setImgIndex] = useState(0)

また、設定オブジェクトでは、次のスライドに対してsetImagIndexを反復します.

 beforeChange: (current, next) => setImgIndex(next), 

また、インデックスがImageIndexと同じであれば、'アクティブ'のクラスをイメージに設定します.

return (
    <div className="App">
      <h1>React 3D Slider</h1>
      <Slider {...settings}>
        {images.map((img, idx) => (

          <div className={idx === imgIndex ? "slide activeSlide" : "slide"}>

            <img src={img} alt={idx} />
          </div>
        ))}
      </Slider>
    </div>
  );

また、2つのメソッドを定義する必要があります.前の矢印と、次の矢印の1つを定義する必要があります.次の矢印では、OnClick propを指定し、次のクラスとprevのクラスを表示します.

  const NextArrow = ({onClick}) => {
    return (
      <div className="arrow next" onClick={onClick}>
        <FaArrowRight />
      </div>
    )
  }

  const PrevArrow = ({onClick}) => {
    return (
      <div className="arrow prev" onClick={onClick}>
        <FaArrowLeft />
      </div>
    )
  }

アプリで.我々のアプリのCSSファイルは、我々は、各スライドとアクティブなスライドの画像のスタイルを定義している他のものよりも大きく見えるように、私はここでは、単純な記事を維持するスタイルシートをここではなく、しかし、完全なコードを表示することができますてhere

それはすべての人々、あなたが読書を楽しむ願って..
ハッピーコーディング.