From d03d48135d3c8f17ca0e2e3685cbbf1978522fdb Mon Sep 17 00:00:00 2001 From: Vibhor Singh Date: Thu, 5 Oct 2023 00:49:00 +0530 Subject: [PATCH] Events Carousal Added --- package-lock.json | 15 ++ package.json | 1 + src/assets/data/eventsData.js | 6 + src/components/eventCard/EventCard.css | 2 + src/pages/home/sections/section3/Section3.css | 3 + src/pages/home/sections/section3/Section3.js | 176 ++++++++++++++++-- 6 files changed, 191 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2f351fa..0b08608 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "react-apexcharts": "^1.4.1", "react-countup": "^6.4.2", "react-dom": "^18.2.0", + "react-icons": "^4.11.0", "react-router-dom": "^6.6.0", "react-scripts": "5.0.1", "react-scroll-trigger": "^0.6.14", @@ -14405,6 +14406,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -27557,6 +27566,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 122c84c..0899fa5 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react-apexcharts": "^1.4.1", "react-countup": "^6.4.2", "react-dom": "^18.2.0", + "react-icons": "^4.11.0", "react-router-dom": "^6.6.0", "react-scripts": "5.0.1", "react-scroll-trigger": "^0.6.14", diff --git a/src/assets/data/eventsData.js b/src/assets/data/eventsData.js index f2b80e2..a0c9c5c 100644 --- a/src/assets/data/eventsData.js +++ b/src/assets/data/eventsData.js @@ -20,6 +20,12 @@ const events = [ img: e, link: "", }, + { + title: "Coming Soon!", + date: "Coming Soon!", + img: e, + link: "", + }, ]; export default events; diff --git a/src/components/eventCard/EventCard.css b/src/components/eventCard/EventCard.css index 99e06d2..52c5f0f 100644 --- a/src/components/eventCard/EventCard.css +++ b/src/components/eventCard/EventCard.css @@ -12,6 +12,7 @@ background-size: cover; display: flex; flex-direction: column; + margin: 10px; box-sizing: border-box; font-family: "Poppins", sans-serif; color: black; @@ -44,6 +45,7 @@ position: relative; margin: auto; width: 100%; + height: auto; transition: all 0.2s ease-in-out; border-radius: 4px; border: 2px solid orange; diff --git a/src/pages/home/sections/section3/Section3.css b/src/pages/home/sections/section3/Section3.css index 8306bbe..687185b 100644 --- a/src/pages/home/sections/section3/Section3.css +++ b/src/pages/home/sections/section3/Section3.css @@ -33,6 +33,9 @@ .codeutsava__section3-events-container { max-width: 98%; + padding: 8rem 0; + margin: 4rem auto; + flex-direction: column; } .codeutsava__section3-events-container .slider .slick-list { diff --git a/src/pages/home/sections/section3/Section3.js b/src/pages/home/sections/section3/Section3.js index 04f1bdd..9fbaf28 100644 --- a/src/pages/home/sections/section3/Section3.js +++ b/src/pages/home/sections/section3/Section3.js @@ -1,6 +1,6 @@ import React from "react"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import "./Section3.css"; @@ -16,6 +16,8 @@ import frank from "../../../../assets/images/frakenstein.png"; import axios from "axios"; +import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai"; + const Section3 = () => { const url = baseUrl + "events/" + previousYear; const [state, setState] = useState({ @@ -36,6 +38,138 @@ const Section3 = () => { console.log(state.data); + const [currentIndex, setCurrentIndex] = useState(0) + const timeRef = useRef(null); + + const carousalStyle = { + height: "100%", + width: "100%", + position: "relative", + display: "flex", + flexDirection: "column", + padding: "1.2rem", + border: "1px solid #f1f1f1aa", + }; + + const slidesOverflow = { + overflow: "hidden", + height: "100%", + }; + + const getSlidesStyle = () => { + if (window.innerWidth>1300) + return ({ + display: "flex", + height: "auto", + transition: "transform ease-out 0.3s", + width: `${(100 * Events.length)/3}%`, + transform: `translateX(${-( + currentIndex * + (100 / Events.length) + )}%)`, + }) + + if (window.innerWidth>1025) + return ({ + display: "flex", + height: "100%", + transition: "transform ease-out 0.3s", + width: `${(100 * Events.length)/2}%`, + transform: `translateX(${-( + currentIndex * + (100 / Events.length) + )}%)`, + }) + + if (window.innerWidth>450) + return ({ + display: "flex", + height: "100%", + transition: "transform ease-out 0.3s", + width: `${(100 * Events.length)}%`, + transform: `translateX(${-( + currentIndex * + (100 / Events.length) + )}%)`, + }) + + return ({ + display: "flex", + height: "100%", + transition: "transform ease-out 0.3s", + width: `${(100 * Events.length)}%`, + transform: `translateX(${-( + currentIndex * + (100 / Events.length) + )}%)`, + }) + }; + + const goToPrevious = () => { + if (window.innerWidth>1300){ + const isFirst = currentIndex === 0; + const newIndex = isFirst ? Events.length - 3 : currentIndex - 1; + setCurrentIndex(newIndex); + } + else if (window.innerWidth>1025){ + const isFirst = currentIndex === 0; + const newIndex = isFirst ? Events.length - 2 : currentIndex - 1; + setCurrentIndex(newIndex); + } + else { + const isFirst = currentIndex === 0; + const newIndex = isFirst ? Events.length - 1 : currentIndex - 1; + setCurrentIndex(newIndex); + } + }; + + const goToNext = () => { + if (window.innerWidth>1300) + { + const isLast = currentIndex === Events.length - 3; + const newIndex = isLast ? 0 : currentIndex + 1; + setCurrentIndex(newIndex); + } + else if (window.innerWidth>1025){ + const isLast = currentIndex === Events.length - 2; + const newIndex = isLast ? 0 : currentIndex + 1; + setCurrentIndex(newIndex); + } + else { + const isLast = currentIndex === Events.length - 1; + const newIndex = isLast ? 0 : currentIndex + 1; + setCurrentIndex(newIndex); + } + }; + + const leftArrowStyle = { + position: "absolute", + top: "40%", + opacity: "0.5", + cursor: "pointer", + zIndex: 1, + left: "32px" + } + + const rightArrowStyles = { + position: "absolute", + top: "40%", + opacity: "0.5", + cursor: "pointer", + zIndex: 1, + right: "32px" + } + + useEffect (() => { + if (timeRef.current) { + clearTimeout(timeRef.current); + } + timeRef.current = setTimeout(() => { + + goToNext(); + }, 2000); + }) + return (
{ Events
- - {Events.map((event, index) => ( - - ))} - +
+
+
+ {Events.map((event, index) => ( + + ))} +
+
+
goToPrevious()}> + +
+
goToNext()}> + +
+
);