From 6e4448402fe0a106412929561359ad89ec8b16fa Mon Sep 17 00:00:00 2001
From: mithelan <mithelandev@gmail.com>
Date: Mon, 28 Oct 2024 21:58:34 +0530
Subject: [PATCH] added

---
 package.json                         |  3 +-
 src/components/Carousel/Carousel.jsx | 55 ++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Carousel/Carousel.jsx

diff --git a/package.json b/package.json
index 01bc97f..b1b1dbf 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-multi-carousel": "^2.8.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx
new file mode 100644
index 0000000..53b0b9e
--- /dev/null
+++ b/src/components/Carousel/Carousel.jsx
@@ -0,0 +1,55 @@
+import Carousel from "react-multi-carousel";
+import "react-multi-carousel/lib/styles.css";
+
+const CarouselCustom = () => {
+  const responsive = {
+    superLargeDesktop: {
+      breakpoint: { max: 4000, min: 1024 },
+      items: 6,
+    },
+    desktop: {
+      breakpoint: { max: 1024, min: 768 },
+      items: 4,
+    },
+    tablet: {
+      breakpoint: { max: 768, min: 464 },
+      items: 2,
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 1,
+    },
+  };
+
+  const logos = [
+    { src: "https://images.unsplash.com/photo-1496200186974-4293800e2c20?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bG9nb3xlbnwwfHwwfHx8MA%3D%3D", alt: "UFC Logo" },
+    { src: "https://images.unsplash.com/photo-1496200186974-4293800e2c20?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bG9nb3xlbnwwfHwwfHx8MA%3D%3D", alt: "UFC Logo" },
+    { src: "https://images.unsplash.com/photo-1496200186974-4293800e2c20?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bG9nb3xlbnwwfHwwfHx8MA%3D%3D", alt: "UFC Logo" },
+  ];
+
+  return (
+    <div style={{ padding: "20px", backgroundColor: "#001e36" }}>
+      <Carousel 
+        responsive={responsive} 
+        infinite={true}
+        autoPlay={true}
+        autoPlaySpeed={2000}
+        customTransition="transform 0.5s ease"
+        transitionDuration={500}
+        containerClass="carousel-container"
+      >
+        {logos.map((logo, index) => (
+          <div key={index} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              style={{ width: "150px", height: "auto", maxWidth: "100%" }}
+            />
+          </div>
+        ))}
+      </Carousel>
+    </div>
+  );
+};
+
+export default CarouselCustom;