🌈 Reactでの画像スライド機能の実装

🌀React slide

👉 Reactとして、「Hola」プロジェクトの進行中、私が担当している機能実装は「メインスライダ」です。スライド機能を始めたばかりの頃、私は全然感じませんでした...

聞いてまた聞いて、グーグルゲームをして、自分で考えました。class componentでスライド機能を探すのは想像ほど簡単ではないので、自分で論理を描きました。

🔥私が考えた論理は以下の通りです。初めて思いついたロジックは、1200 pxを中間画像の大きさ、残りの両側に表示される終了画像を360 pxとし、ボタンを押すと画像が移動します。

🤯 しかし、私は論理を実現するために努力していると思います。それを関数に符号化するのは難しいと思います。だから私はグーグルゲームをやり直して、指導者に聞いても関数を作った。しかし、勉強の過程で画像スライド機能を実現したいという私はとても面白いと思います。(私の頭の中で描いたロジックをコードに変えて、実際に機能を実現する...こいつ...おもしろい...?🤩)🥳

▼▼私が実現したコード

  prevSlide = () => {
    const { slidePosition } = this.state;
    if (slidePosition < 0) {
      this.setState({
        slidePosition: slidePosition + slideWidth,
      });
    } else if (slidePosition === 0) {
      this.setState({
        slidePosition: -slideWidth * 6,
      });
    }
  };

  nextSlide = () => {
    const { slidePosition } = this.state;
    if (slidePosition > -slideWidth * 6) {
      this.setState({
        slidePosition: slidePosition - slideWidth,
      });
    } else if (slidePosition === -slideWidth * 6) {
      this.setState({
        slidePosition: 0,
      });
    }
  };