fix: slider

Signed-off-by: Saurav Upadhyay <[email protected]>
upsaurav12 · Jul 20, 2024 · 8a30198 · 8a30198
1 parent f1e47e6
commit 8a30198
Showing 1 changed file with 54 additions and 35 deletions.
diff --git a/src/components/Related-Resources/index.js b/src/components/Related-Resources/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Link } from "gatsby";
 import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward";
 import Card from "../Card";
@@ -11,9 +11,28 @@ import useHasMounted from "../../utils/useHasMounted";
 
 const RelatedResources = props => {
 
-  const { resourceType , relatedResources , mainHead , lastCardHead , linkToAllItems } = props;
+  const { resourceType, relatedResources, mainHead, lastCardHead, linkToAllItems } = props;
 
   const hasMounted = useHasMounted();
+  const [slidesToShow, setSlidesToShow] = useState(3);
+
+  const updateSlidesToShow = () => {
+    if (window.innerWidth <= 700) {
+      setSlidesToShow(1);
+    } else if (window.innerWidth <= 991) {
+      setSlidesToShow(2);
+    } else if (window.innerWidth <= 1400) {
+      setSlidesToShow(3);
+    }
+  };
+
+  useEffect(() => {
+    updateSlidesToShow();
+    window.addEventListener("resize", updateSlidesToShow);
+    return () => {
+      window.removeEventListener("resize", updateSlidesToShow);
+    };
+  }, []);
 
   return (
     <RelatedResourcesWrapper>
@@ -22,41 +41,41 @@ const RelatedResources = props => {
       </div>
       {
         hasMounted &&
-                <Slider
-                  dots= { window.innerWidth < 992 }
-                  arrows={ window.innerWidth >= 992 }
-                  infinite= {false}
-                  speed= "500"
-                  slidesToShow= {window.innerWidth <= 720 ? 1 : window.innerWidth <= 991 ? 2 : 3}
-                  slidesToScroll= {1}
-                >
-                  {
-                    resourceType === "resources" ? relatedResources.map(({ resource }) => {
-                      return (
-                        <Col className="cardCol" xs={12} key={resource.fields.slug}>
-                          <Card frontmatter={resource.frontmatter} fields={resource.fields}/>
-                        </Col>
-                      );
-                    }) : relatedResources.map((resource) => {
-                      return (
-                        <Col className="cardCol" xs={12} key={resource.fields.slug}>
-                          <Card frontmatter={resource.frontmatter} fields={resource.fields}/>
-                        </Col>
-                      );
-                    })
-                  }
-                  <Col xs={12} lg={12} className="allResources">
-                    <div className="allResources_card">
-                      <Link to={linkToAllItems}>
-                        <h2>{lastCardHead}</h2>
-                        <IoIosArrowRoundForward/>
-                      </Link>
-                    </div>
-                  </Col>
-                </Slider>
+        <Slider
+          dots={window.innerWidth < 992}
+          arrows={window.innerWidth >= 992}
+          infinite={false}
+          speed="500"
+          slidesToShow={slidesToShow}
+          slidesToScroll={1}
+        >
+          {
+            resourceType === "resources" ? relatedResources.map(({ resource }) => {
+              return (
+                <Col className="cardCol" xs={12} key={resource.fields.slug}>
+                  <Card frontmatter={resource.frontmatter} fields={resource.fields} />
+                </Col>
+              );
+            }) : relatedResources.map((resource) => {
+              return (
+                <Col className="cardCol" xs={12} key={resource.fields.slug}>
+                  <Card frontmatter={resource.frontmatter} fields={resource.fields} />
+                </Col>
+              );
+            })
+          }
+          <Col xs={12} lg={12} className="allResources">
+            <div className="allResources_card">
+              <Link to={linkToAllItems}>
+                <h2>{lastCardHead}</h2>
+                <IoIosArrowRoundForward />
+              </Link>
+            </div>
+          </Col>
+        </Slider>
       }
     </RelatedResourcesWrapper>
   );
 };
 
-export default RelatedResources;
+export default RelatedResources;