completedthecarausel

.gitignore

@@ -0,0 +1 @@
+node_modules

src/.gitignore

@@ -0,0 +1 @@
+node_modules

src/components/Carousel.css

@@ -1 +1,64 @@
-/* write down the css for Carousel in this file */
+/* write down the css for Carousel in this file */
+
+.carousel-container {
+
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .arrow-btn-left {
+    position: absolute;
+    top: 50%;
+    left:10% ;
+    background-color: transparent;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+  }
+
+
+  .arrow-btn-right {
+    position: absolute;
+    top: 50%;
+    left:85% ;
+    background-color: transparent;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+  }
+
+
+  .carousel-item {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .text-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    text-align: center;
+    width: 100%;
+    z-index: 1;
+  }
+
+   h2 {
+    position: absolute;
+  left: 40%;
+  top: 5%;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+  }
+
+
+  p {
+    position: absolute;
+  left: 30%;
+  top: 85%;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+  }

src/components/Carousel.jsx

@@ -1,13 +1,39 @@
 import React, { useState } from "react";
 import "./Carousel.css";
 import { images } from "../data/CarouselData";
-
-// you can research - how to use material ui
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 
-// complete the function below:
-function Carousel() {
-}
+const Carousel = () => {
+  const [currentindex, setCurrentIndex] = useState(0);
+
+  const currentImage = images[currentindex];
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+  };
+
+  const handlePrev = () => {
+    setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
+  };
+
+  return (
+    <>
+      <div className="carousel-container">
+        <button className="arrow-btn-left" onClick={handlePrev}>
+          <ArrowBackIosIcon />
+        </button>
+        <div className="carousel-item">
+          <img className="image" src={currentImage.img} alt={currentImage.title} />
+          <h2>{currentImage.title}</h2>
+          <p>{currentImage.subtitle}</p>
+        </div>
+        <button className="arrow-btn-right" onClick={handleNext}>
+          <ArrowForwardIosIcon />
+        </button>
+      </div>
+    </>
+  );
+};
 
-export default Carousel;
+export default Carousel;