Merge pull request #779 from Edwinliby/old-dev

slider kkemlearningfest

package.json

@@ -26,7 +26,7 @@
     "react-scripts": "5.0.1",
     "react-tabs": "^5.1.0",
     "react-time-ago": "^7.2.1",
-    "swiper": "^8.4.7",
+    "swiper": "^10.1.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Pages/KKEMLearningFest/KKEMLearningFest.module.css

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 .kkemLearningFestFooter{

src/Pages/KKEMLearningFest/components/Cards/Cards.jsx

@@ -1,14 +1,47 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import mario from "../../assets/mario.webp";
 import styles from "./Cards.module.css";
 import princess from "../../assets/Princess.webp";
 import luigi from "../../assets/Luigi.webp";
 
 export default function Cards() {
+  const slider = useRef(null);
+
+  useEffect(() => {
+    const sliderElement = slider.current; 
+    let isDown = false;
+    let startX;
+    let scrollLeft;
+
+    sliderElement.addEventListener('mousedown', (e) => {
+      isDown = true;
+      sliderElement.classList.add('active');
+      startX = e.pageX - sliderElement.offsetLeft;
+      scrollLeft = sliderElement.scrollLeft;
+    });
+
+    sliderElement.addEventListener('mouseleave', () => {
+      isDown = false;
+      sliderElement.classList.remove('active');
+    });
+
+    sliderElement.addEventListener('mouseup', () => {
+      isDown = false;
+      sliderElement.classList.remove('active');
+    });
+
+    sliderElement.addEventListener('mousemove', (e) => {
+      if (!isDown) return;
+      e.preventDefault();
+      const x = e.pageX - sliderElement.offsetLeft;
+      const walk = (x - startX) * 3;
+      sliderElement.scrollLeft = scrollLeft - walk;
+    });
+  }, []);
+
   return (
-    <div className={styles.carosel}>      
-      <div className={styles.mainConatiner}>
-      <div className={styles.cardsConatiner}>
+    <div ref={slider} className={styles.carosel}>
+      <div  className={styles.cardsConatiner}>
         <div className={styles.card}>
           <img src={mario} alt="" />
           <div className={styles.cardConatiner}>
@@ -93,8 +126,6 @@ export default function Cards() {
           </div>
         </div>
       </div>
-      </div>
-
     </div>
   );
 }

src/Pages/KKEMLearningFest/components/Cards/Cards.module.css

@@ -10,10 +10,15 @@
 
 .carosel {
   width: 100%;
-  display: grid;
-  place-content: center;
-  /* overflow: hidden; */
+  display: flex;
   position: relative;
+  gap: 2rem;
+  padding: 0 13rem;
+  overflow-x: scroll;
+}
+
+.carosel::-webkit-scrollbar {
+  display: none;
 }
 
 .cardsConatiner {
@@ -156,7 +161,18 @@
   animation: fade-down 3s ease;
 }
 
+@media(width<1025px){
+  .carosel{
+    padding: 0 5rem;
+  }
+}
+
 @media (width<820px) {
+  .carosel {
+    padding: 0;
+    gap: 0rem;
+  }
+
   .cardsConatiner {
     margin: 1.5rem;
     justify-content: center;
@@ -169,7 +185,7 @@
   }
 
   .cardConatiner {
-    width: fit-content ;
+    width: fit-content;
     padding: 30px 20px;
   }
 

src/Pages/KKEMLearningFest/components/FAQs/FAQ.module.css

@@ -53,7 +53,7 @@
     transition: all .3s ease-in-out;
 }
 
-.faqContainer .faqs .faq .questionContainer details[open] .arrow{
+.faqContainer .faqs .faq .questionContainer details[open] .arrow {
     rotate: 90deg;
 }
 
@@ -104,12 +104,15 @@
     }
 }
 
-@media(width<820px) {
-    .faqContainer .faqs {
-        padding: 10px;
-    }
+@media(width<=1024px) {
     .faqContainer {
         width: 94%;
         min-width: unset;
     }
+}
+
+@media(width<820px) {
+    .faqContainer .faqs {
+        padding: 10px;
+    }
 }