make the embla carousel responsive

CodeHive-Solutions · Sep 10, 2024 · 75fbbaf · 75fbbaf
1 parent 45a607f
commit 75fbbaf
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
         "cally": "^0.7.1",
         "depcheck": "^1.4.7",
         "embla-carousel-autoplay": "^8.2.1",
+        "embla-carousel-class-names": "^8.2.1",
         "embla-carousel-fade": "^8.2.1",
         "embla-carousel-react": "^8.2.1",
         "formik": "^2.4.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/pages/Home.jsx b/src/components/pages/Home.jsx
@@ -166,12 +166,12 @@ const Home = () => {
 
     return (
         <>
-            <Box sx={{ display: "flex", mt: "5.5rem", px: "2rem", textAlign: "center", justifyContent: "center" }}>
+            {/* <Box sx={{ display: "flex", mt: "5.5rem", px: "2rem", textAlign: "center", justifyContent: "center" }}>
                 <CarouselComponent items={homeImages} contain={true} height={matches ? "648px" : "480px"} width={matches ? "1152px" : "854px"} />
-            </Box>
-            {/* <Box sx={{ mt: "6rem", display: "flex", alignItems: "center", justifyContent: "center" }}>
-                <EmblaCarousel />
             </Box> */}
+            <Box sx={{ mt: "6rem", display: "flex", alignItems: "center", justifyContent: "center" }}>
+                <EmblaCarousel />
+            </Box>
             <Container sx={{ display: "flex", flexDirection: "column", gap: "2rem", mt: "2rem" }}>
                 <Typography
                     color="primary"

diff --git a/src/components/shared/EmblaCarousel.jsx b/src/components/shared/EmblaCarousel.jsx
@@ -1,25 +1,26 @@
-import React from "react";
+// Libraries
 import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+
+// Images
 import depression from "../../images/home-carousel/depression.png";
 import password from "../../images/home-carousel/password.png";
 import water from "../../images/home-carousel/water.png";
-import Autoplay from "embla-carousel-autoplay";
-import Fade from "embla-carousel-fade";
 
 export function EmblaCarousel() {
-    const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay({ delay: 4000, stopOnInteraction: false })], [Fade()]);
+    const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay({ delay: 4000, stopOnInteraction: false })]);
 
     return (
-        <div className="embla" style={{ overflow: "hidden" }} ref={emblaRef}>
+        <div className="embla" style={{ overflow: "hidden", padding: "2rem" }} ref={emblaRef}>
             <div className="embla__container" style={{ display: "flex", maxWidth: "1280px" }}>
-                <div style={{ flex: "0 0 auto", minWidth: 0, maxWidth: "100%", margin: "20px 20px 0 0" }} className="embla__slide">
-                    <img style={{ borderRadius: "1.8rem" }} src={depression} alt="depression" />
+                <div style={{ flex: "0 0 auto", minWidth: 0, maxWidth: "100%", margin: "20px 20px 0 0" }} className="embla__slide ">
+                    <img width={"100%"} style={{ borderRadius: "1.8rem" }} src={depression} alt="depression" />
                 </div>
-                <div style={{ flex: "0 0 auto", minWidth: 0, maxWidth: "100%", margin: "20px 20px 0 0" }} className="embla__slide">
-                    <img style={{ borderRadius: "1.8rem" }} src={password} alt="password" />
+                <div style={{ flex: "0 0 auto", minWidth: 0, maxWidth: "100%", margin: "20px 20px 0 0" }} className="embla__slide ">
+                    <img width={"100%"} style={{ borderRadius: "1.8rem" }} src={password} alt="password" />
                 </div>
-                <div style={{ flex: "0 0 auto", minWidth: 0, maxWidth: "100%", margin: "20px 20px 0 0" }} className="embla__slide">
-                    <img style={{ borderRadius: "1.8rem" }} src={water} alt="water" />
+                <div style={{ flex: "0 0 auto", minWidth: 0, maxWidth: "100%", margin: "20px 20px 0 0" }} className="embla__slide ">
+                    <img width={"100%"} style={{ borderRadius: "1.8rem" }} src={water} alt="water" />
                 </div>
             </div>
         </div>