Image Slider

App.js

import "./styles.css";
import Slider from "./Slider";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Slider />
    </div>
  );
}

Slider.js

import SliderData from "./SliderData";
import React, { useState } from "react";
import "./Slider.css";
import SliderBtn from "./SliderBtn";
function Slider() {
  const [slideIndex, setSlideIndex] = useState(0);
  const nextSlide = () => {
    if (slideIndex !== SliderData.length - 1) {
      setSlideIndex(slideIndex + 1);
      console.log(slideIndex);
    } else if (slideIndex === SliderData.length - 1) {
      setSlideIndex(0);
      console.log(slideIndex);
    }
  };

  const prevSlide = () => {
    if (slideIndex !== 0) {
      setSlideIndex(slideIndex - 1);
    } else if (slideIndex === 0) {
      setSlideIndex(SliderData.length - 1);
    }
  };

  return (
    <div>
      <div className="container-slider">
        {SliderData.map(({ image, id }) => (
          <div
            key={id}
            className={slideIndex === id ? "slide active-anim" : "slide"}
          >
            <SliderBtn moveSlide={prevSlide} direction="previous" />
            <img src={SliderData[slideIndex].image} alt="image slider" />

            <SliderBtn moveSlide={nextSlide} direction="next" />
          </div>
        ))}
      </div>
      </div>

  );
}
export default Slider;

SliderData.js

const SliderData = [
  {
    id: 0,
    title: "Lorem ipsum",
    subTitle: "Lorem",
    image:
      "https://images.unsplash.com/photo-1460648304944-4883b5cfcee5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=891&q=80"
  },
  {
    id: 1,
    title: "Lorem ipsum",
    subTitle: "Lorem",
    image:
      "https://images.unsplash.com/photo-1524591431555-cc7876d14adf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2xpZGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60"
  },
  {
    id: 2,
    title: "Lorem ipsum",
    subTitle: "lorem3",
    image:
      "https://images.freeimages.com/images/large-previews/25c/abstract-flowers-2-1199959.jpg"
  },
  {
    id: 3,
    title: "Lorem ipsum",
    subTitle: "Lorem",
    image:
      "https://media.istockphoto.com/photos/abstract-soft-watercolor-background-on-a-white-paper-pink-purple-and-picture-id1331709865?s=612x612"
  },
  {
    id: 4,
    title: "Lorem ipsum",
    subTitle: "Lorem",
    image:
      "https://images.freeimages.com/images/large-previews/db4/disturbing-water-1180557.jpg"
  }
];
// {
//   id: uuidv4(),
//   title: "Lorem ipsum",
//   subTitle: "Lorem"
// },
export default SliderData;

sliderbtn

import nextIcon from "./images/next.png";
import previousIcon from "./images/previous.png";

function SliderBtn(props) {
  function icon() {
    if (props.direction === "next") {
      return nextIcon;
    } else {
      return previousIcon;
    }
  }
  /*document.getElementById("btn").clicked===true*/
  // function moveSliderF() {
  //   if (props.direction === "next") {
  //     return btn-slide-next;
  //   } else {
  //     return btn-slide-prev;
  //   }
  // }

  return (
    <div>
      <button
        className={
          props.direction === "next" ? "btn-slide next" : "btn-slide prev"
        }
        id="btn"
        onClick={props.moveSlide}
      >
        <img src={icon()} alt="icon" />
      </button>
    </div>
  );
}
export default SliderBtn;

slider.css

.container-slider {
  max-width: 700px;
  height: 500px;
  margin: 100px auto 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 700px) {
  .container-slider {
    margin: 100px 10px 0;
  }
}
.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity ease-in-out 0.4s;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.active-anim {
  opacity: 1;
}

.btn-slide {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f1f1f1;
  border: 1px solid rgba(34, 34, 34, 0.287);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn-slide img {
  width: 25px;
  height: 25px;
  pointer-events: none;
}
.prev {
  top: 50%;
  left: 20px;
  transform: translateY(-60%);
}
.next {
  top: 50%;
  right: 20px;
  transform: translateY(-60%);
}

/* .container-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #f1f1f1;
  margin: 0 5px;
  background: #f1f1f1;
}
.dot.active {
  background: rgb(32, 32, 32);
} */