carousel

package-lock.json

@@ -24,10 +24,12 @@
         "axios": "^1.7.9",
         "dotenv": "^16.4.7",
         "framer-motion": "^11.16.0",
+        "pure-react-carousel": "^1.32.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-material-ui-carousel": "^3.4.2",
         "react-redux": "^9.2.0",
+        "react-responsive-carousel": "^3.2.23",
         "react-router-dom": "^7.0.2",
         "react-scripts": "^5.0.1",
         "shopify-api-node": "^3.14.0",
@@ -6568,6 +6570,12 @@
       "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==",
       "license": "MIT"
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -7532,6 +7540,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/deep-freeze": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
+      "integrity": "sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==",
+      "license": "public domain"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -7998,6 +8012,15 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/equals": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/equals/-/equals-1.0.5.tgz",
+      "integrity": "sha512-wI15a6ZoaaXPv+55+Vh2Kqn3+efKRv8QPtcGTjW5xmanMnQzESdAt566jevtMZyt3W/jwLDTzXpMph5ECDJ2zg==",
+      "license": "MIT",
+      "dependencies": {
+        "jkroso-type": "1"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -12047,6 +12070,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jkroso-type": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jkroso-type/-/jkroso-type-1.1.1.tgz",
+      "integrity": "sha512-zZgay+fPG6PgMUrpyFADmQmvLo39+AZa7Gc5pZhev2RhDxwANEq2etwD8d0e6rTg5NkwOIlQmaEmns3draC6Ng==",
+      "license": "MIT"
+    },
     "node_modules/jose": {
       "version": "5.9.6",
       "resolved": "https://registry.npmjs.org/jose/-/jose-5.9.6.tgz",
@@ -15139,6 +15168,32 @@
         "node": ">=6"
       }
     },
+    "node_modules/pure-react-carousel": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/pure-react-carousel/-/pure-react-carousel-1.32.0.tgz",
+      "integrity": "sha512-RW0zKjjId1Xmspcqdu3v0pmlce3BVDACJ0fzt1+ZPJ4GxqJbIqt2kPAh1e5M19S5BDewihnq6kz4kIaGXleO3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "deep-freeze": "0.0.1",
+        "deepmerge": "^2.2.1",
+        "equals": "^1.0.5",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "15.x || 16.x || 17.x || 18.x",
+        "react-dom": "15.x || 16.x || 17.x || 18.x"
+      }
+    },
+    "node_modules/pure-react-carousel/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -15410,6 +15465,18 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -15730,6 +15797,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive-carousel": {
+      "version": "3.2.23",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz",
+      "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "node_modules/react-router": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz",

package.json

@@ -19,10 +19,12 @@
     "axios": "^1.7.9",
     "dotenv": "^16.4.7",
     "framer-motion": "^11.16.0",
+    "pure-react-carousel": "^1.32.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-material-ui-carousel": "^3.4.2",
     "react-redux": "^9.2.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^7.0.2",
     "react-scripts": "^5.0.1",
     "shopify-api-node": "^3.14.0",

src/components/CarouselContainer/CarouselContainer.jsx

@@ -5,18 +5,21 @@ import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import mainImage1 from "../../assets/images/MAINHEADER-01.webp";
 import mainImage2 from "../../assets/images/MAINHEADER-02.webp";
 import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg";
-import Carousel from 'react-material-ui-carousel'
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
+import { Carousel } from 'react-responsive-carousel';
 
 const CarouselContainer = () => {
 
   const items = [
+    { img_src: mainImage2, alt_name: "Image 2" },
     { img_src: mainImage1, alt_name: "Image 1" },
     { img_src: mainImage2, alt_name: "Image 2" },
+    { img_src: mainImage1, alt_name: "Image 1" },
   ];
 
   return (
 
-    <Carousel indicators={false} autoPlay={true} interval={3000}>
+    <Carousel showStatus={false} autoPlay={true} infiniteLoop={true} interval={3000} showIndicators={false} stopOnHover={false}>
       {items?.map(({ img_src, alt_name }, index) => (
         <Box
           key={index}
@@ -25,13 +28,11 @@ const CarouselContainer = () => {
           alt={alt_name}
           sx={{
             width: "100%",
-            objectFit: "cover",
-            transition: "opacity 0.5s ease-in-out",
+            height: "100%",
             zIndex: 0,
           }}
         />
       ))}
-
     </Carousel>