Merge pull request #7307 from Katotodan/feature/fix-slider-on-mobile

Fix responsive behavior of SoSpecial carousel items across screen sizes

Author: Rajesh-Nagarajan-11

src/sections/Home/So-Special-Section/index.js

@@ -1,5 +1,5 @@
 
-import React from "react";
+import React, {useLayoutEffect, useState, useRef} from "react";
 import Slider from "react-slick";
 import SoSpecialWrapper from "./so-special-style";
 
@@ -9,6 +9,9 @@ import Image from "../../../components/image";
 // import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const SoSpecial = () => {
+  const [isClient, setIsClient] = useState(false);
+  const [slidesToShowState, setSlidesToShowState] = useState(null);
+  const sliderRef = useRef(null);
   const data = useStaticQuery(
     graphql`query newsList {
   allMdx(
@@ -53,56 +56,55 @@ const SoSpecial = () => {
 }`
   );
   const settings = {
-    dots: false,
+    dots: slidesToShowState <= 1,
     infinite: false,
     speed: 500,
-    slidesToShow: 2.5,
     swipeToSlide: true,
-
-    responsive: [
-      {
-        breakpoint: 1200,
-        settings: {
-          slidesToShow: 2.2,
-
-        }
-      },
-      {
-        breakpoint: 1024,
-        settings: {
-          slidesToShow: 2,
-
-        }
-      },
-      {
-        breakpoint: 800,
-        settings: {
-          slidesToShow: 1.5,
-          slidesToScroll: 1,
-          initialSlide: 1
-        }
-      },
-      {
-        breakpoint: 600,
-        settings: {
-          dots: true,
-          arrows: false,
-          slidesToShow: 1,
-          slidesToScroll: 1,
-          initialSlide: 1
-        }
-      },
-      {
-        breakpoint: 400,
-        settings: {
-          dots: true,
-          arrows: false,
-          slidesToShow: 1,
-          slidesToScroll: 1
-        }
-      }
-    ]
+    slidesToScroll: 1,
+    arrows: slidesToShowState !== 1,
+    slidesToShow: slidesToShowState ?? 2.5,
   };
+  
+    const computeSlides = () => {
+      const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200;
+      if (w <= 600) return 1;
+      if (w <= 800) return 1.5;
+      if (w <= 1024) return 2;
+      if (w <= 1200) return 2.2;
+      return 3;
+    };
+  
+    useLayoutEffect(() => {
+  
+      setIsClient(true);
+      setSlidesToShowState(computeSlides());
+  
+      let resizeTimeout = null;
+      const onResizeDebounced = () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+          const slides = computeSlides();
+          setSlidesToShowState((prev) => {
+            if (prev !== slides) return slides;
+            return prev;
+          });
+          if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") {
+            sliderRef.current.innerSlider.onWindowResized();
+          }
+        }, 100);
+      };
+    
+      window.addEventListener("resize", onResizeDebounced);
+      window.addEventListener("load", onResizeDebounced);
+  
+      return () => {
+        window.removeEventListener("resize", onResizeDebounced);
+        window.removeEventListener("load", onResizeDebounced);
+        clearTimeout(resizeTimeout);
+      };
+    }, []);
+  
+    if (!isClient || slidesToShowState === null) return null;
 
   // const { isDark } = useStyledDarkMode();
 
@@ -113,7 +115,7 @@ const SoSpecial = () => {
         <h1>We're making a splash</h1>
       </div>
       <div className="special_carousel">
-        <Slider {...settings}>
+        <Slider {...settings} key={`review-slider-${slidesToShowState}`} ref={sliderRef}>
           {
             data.allMdx.nodes.map(({ id, frontmatter, fields }) => (
               <Button className="special-cont_btn" $url={fields.slug} key={id}>

src/sections/Home/So-Special-Section/so-special-style.js

@@ -12,7 +12,7 @@ const SoSpecialWrapper = styled.div`
     .slick-list .slick-track{
         width:5000px;
     }
-    @media only screen and (max-width:450px){
+    @media only screen and (max-width:600px){
         padding:1rem;
     }
     .special_carousel{
@@ -82,7 +82,7 @@ const SoSpecialWrapper = styled.div`
         opacity: 1;
         color: ${props => props.theme.secondaryColor};
     }
-    }
+    
     .so-special-head{
         padding:2rem;
         text-align:center; 
@@ -104,17 +104,19 @@ const SoSpecialWrapper = styled.div`
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
     #special-cont_img{
-        height:70%;
+        height:17rem;
         width:100%;
         overflow:hidden;
           .gatsby-image-wrapper, .old-gatsby-image-wrapper{
               height:100%;
           }
           img{
-            height: inherit;
+            height: 17rem;
             display: block;
             text-align: center;
             margin: auto;
+            object-fit: fill !important;
+            image-rendering: auto;
           }
     }
     .slick-dots{
@@ -162,21 +164,8 @@ const SoSpecialWrapper = styled.div`
             width:75%;
         }
     }
-    @media screen and (min-width: 1199px){
-        .special-cont_img{
-            height:20rem;
-            width:100%;
-        }
-    }
-    @media screen and (max-width: 1199px){
-        .special-cont_img{
-            height:20rem;
-            width:100%;
-        }
-    }
     @media screen and (max-width: 1024px){
         .special_carousel{
-            margin-bottom: 3rem;
             width:80%;
         }
         .special-cont_img{
@@ -190,13 +179,8 @@ const SoSpecialWrapper = styled.div`
 
     @media screen and (max-width: 850px){
         .special_carousel{
-            margin-bottom: 3rem;
             width:100%;
         }
-        .special-cont_img{
-            width: 22rem;
-            max-height: 17rem;
-        }
         .so-special-head{
             padding:1rem;
             text-align:center;  
@@ -207,19 +191,11 @@ const SoSpecialWrapper = styled.div`
         }
     }
     @media screen and (max-width: 671px){
-        .special-cont_img{
-            width: 100%;
-            max-height: 20rem;
-        }
         .special-cont_content{
             padding:0rem;
         }
     }
     @media screen and (max-width: 500px){
-        #special-cont_img{
-            width: 100%;
-            height: 65%;
-        }
         .so-special-head{
             padding: 0.5rem 0;
         }   
@@ -229,9 +205,6 @@ const SoSpecialWrapper = styled.div`
             height:25rem;
             margin:0;
         }
-        #special-cont_img{
-            height: 60%;
-        }
         #special-cont_content{
             .special-cont_para
             {