Can i add animation effect while changing the picture in react

Issue

I have to make a slider and what i did is that. Import all the images from directories and then stores them in an array. after that i make two button + and – . Because i use UseState hooks which has will help in two function add and subtract. which will loop through the index of array and show the images.

My question is

  1. How do i make a transition effect while changing this images
  2. I too have to write something over images respectivly in each image how can i write there.

Slider.js

import React, { useState } from "react";
import Img1 from "../data/SliderImages/1.avif";
import Img2 from "../data/SliderImages/2.avif";
import Img3 from "../data/SliderImages/3.avif";
import Img4 from "../data/SliderImages/4.jpg";
import Img5 from "../data/SliderImages/5.jpg";
import Img6 from "../data/SliderImages/6.jpg";
import Img7 from "../data/SliderImages/7.avif";

function Slider() {
  let SliderArray = [Img1, Img2, Img3, Img4, Img5, Img6, Img7];
  const [count, setCounter] = useState(0);
  const addIndex = () => {
    if (count > SliderArray.length - 1) {
      setCounter = 6;
    } else {
      setCounter(count + 1);
    }
  };

  const subIndex = () => {
    if (count === 0) {
      setCounter = 0;
    } else {
      setCounter(count - 1);
    }
  };

  return (
    <div>
      <h1>Slider</h1>

      <button onClick={addIndex}>Add Image</button>
      <img src={SliderArray[count]} alt="" />
      <button onClick={subIndex}>Add Image</button>
    </div>
  );
}

export default Slider;

Img1, … Img7 are static consider random.

Example stuffs

Solution

const [transition, setTransition] = useState("");

const transit = (direction: string) => {
  setTransition("transition-" + direction);
  setTimeout(() => {
    setTransition("");
  }, 500);
};

<button
  onClick={() => {
    transit("left");
    addIndex();
  }}
>
  Add Image
</button>

<button
  onClick={() => {
    transit("right");
    subIndex();
  }}
>
  Sub Image
</button>

<img
  className={transition}
  style={{ height: "200px", width: "200px" }}
  src={SliderArray[count]}
  alt=""
/>

CSS

.transition-right {
  animation: fadeinRight 0.5s ease-in-out;
}

.transition-left {
  animation: fadeinLeft 0.5s ease-in-out;
}

@keyframes fadeinRight {
  0% {
    transform: translateX(300px);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeinLeft {
  0% {
    transform: translateX(-300px);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

With the text

const img1 = { src: 'https://picsum.photos/200/200', text: 'foo' };
const img2 = { src: 'https://picsum.photos/200/300', text: 'bar' };
const img3 = { src: 'https://picsum.photos/200/400', text: 'foobar' };
const img4 = { src: 'https://picsum.photos/200/500', text: 'barfoo' };

<img
  className={transition}
  style={{ height: '200px', width: '200px' }}
  src={SliderArray[count].src}
  alt=""
/>
<p>{SliderArray[count].text}</p>

Answered By – Juan IWK3

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published