Add Bottom Dots Image Progress

src/component/Dots.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+function Dots({ activeIndex, onClick, sliderImage }) {
+  return (
+    <div className="all-dots">
+      {sliderImage.map((_, index) => (
+        <span
+          key={index}
+          className={activeIndex === index ? "dot active-dot" : "dot"}
+          onClick={() => onClick(index)}
+        />
+      ))}
+    </div>
+  );
+}
+export default Dots;

src/component/Slider.js

@@ -1,37 +1,42 @@
 import React, { useEffect, useState } from "react";
+import Dots from "./Dots";
 import data from "../JsonData/data.json";
+
 const Slider = () => {
-  const [next, setNext] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
   const handleNext = () => {
-    setNext((preValue) => {
-      if (preValue === data?.length - 1) {
-        return 0;
-      }
-      return preValue + 1;
-    });
+    setCurrentIndex((prev) => (prev === data.length - 1 ? 0 : prev + 1));
   };
-  const handlePre = () => {
-    if (next === 0) {
-      setNext(data?.length - 1);
-    } else {
-      setNext(next - 1);
-    }
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => (prev === 0 ? data.length - 1 : prev - 1));
   };
+
   useEffect(() => {
-  setInterval(handleNext, 5000);
-   
-  },[]);
+    const interval = setInterval(handleNext, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div className="container">
-      
       <div className="left-btn">
-        <button onClick={handlePre}>{"<"}</button>
+        <button onClick={handlePrev}>{"<"}</button>
       </div>
-      <img src={data[next]?.download_url} alt="image-not-found"></img>
+      <img
+        src={data[currentIndex]?.download_url}
+        alt={data[currentIndex]?.title || "image-not-found"}
+      />
       <div className="right-btn">
         <button onClick={handleNext}>{">"}</button>
       </div>
+      <Dots
+        activeIndex={currentIndex}
+        sliderImage={data}
+        onClick={(index) => setCurrentIndex(index)}
+      />
     </div>
   );
 };
-export default Slider;
+
+export default Slider;

src/index.css

@@ -1,34 +1,34 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
-img{
+img {
   width: 100%;
-  height:auto;
+  height: auto;
 }
 
-.left-btn, .right-btn{
+.left-btn,
+.right-btn {
   position: absolute;
   top: 50%;
   transform: translateY(300%);
 }
-.left-btn{
+.left-btn {
   left: 20px;
-  
 }
-.right-btn{
+.right-btn {
   right: 20px;
 }
-button{
+button {
   height: 20px;
   width: 30px;
   background-color: rgba(0, 0, 0, 0);
@@ -36,9 +36,38 @@ button{
   border: none;
   font-size: 125%;
 }
-button:hover{
+button:hover {
   color: white;
 }
+.all-dots {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  margin: 4px;
+  background-color: black;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.4s ease;
+}
+
+.active-dot {
+  background-color: white;
+  transform: scale(1.3);
+}
+
+.dot:hover {
+  background-color: gray;
+}
+
 @media (max-width: 768px) {
-   .left-btn, .right-btn { top: 40%;  } 
-  }
+  .left-btn,
+  .right-btn {
+    top: 40%;
+  }
+}