From 68f5ccf983d733c305ea7fd026be8d508325c6bb Mon Sep 17 00:00:00 2001 From: JManion32 Date: Fri, 6 Mar 2026 14:24:33 -0500 Subject: [PATCH] Working Carousel V1 --- src/components/Carousel.tsx | 71 ++++++++++++++------ src/components/Organization.tsx | 7 +- src/css/carousel.css | 114 +++++++++++++++++++++++++++++--- src/css/organizations.css | 1 + 4 files changed, 160 insertions(+), 33 deletions(-) diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx index c8ec2a4..5413205 100644 --- a/src/components/Carousel.tsx +++ b/src/components/Carousel.tsx @@ -1,32 +1,63 @@ +import { useState } from 'react'; import '../css/carousel.css'; -import Organization from './Organization.tsx'; +import Organization from './Organization'; type CarouselProps = { type: string; }; export default function Carousel({ type }: CarouselProps) { + const [active, setActive] = useState(0); + + const organizations = [ + { title: 'Math Club', desc: 'The RPI Math Faculty approved and Union affiliated math club!' }, + { title: 'Science Club', desc: 'The RPI Math Faculty approved and Union affiliated science club!' }, + { title: 'Gym Club', desc: 'The RPI Math Faculty approved and Union affiliated gym club!' }, + { title: 'Dance Club', desc: 'The RPI Math Faculty approved and Union affiliated dance club!' }, + { title: 'English Club', desc: 'The RPI Math Faculty approved and Union affiliated english club!' }, + { title: 'Coding Club', desc: 'The RPI Math Faculty approved and Union affiliated coding club!' }, + { title: 'Archery Club', desc: 'The RPI Math Faculty approved and Union affiliated archery club!' }, + { title: 'Golf Club', desc: 'The RPI Math Faculty approved and Union affiliated golf club!' }, + { title: 'Running Club', desc: 'The RPI Math Faculty approved and Union affiliated running club!' }, + { title: 'Study Club', desc: 'The RPI Math Faculty approved and Union affiliated study club!' }, + ]; + + const moveLeft = () => { + setActive((prev) => Math.max(prev - 1, 0)); + }; + + const moveRight = () => { + setActive((prev) => Math.min(prev + 1, organizations.length - 1)); + }; + return ( - <> -
-
- {type} -
- - - -
+
+ {type} + +
+ + +
+ {organizations.map((org, index) => { + const offset = index - active; + return ( + setActive(index)} + /> + ); + })}
+ +
- +
); } diff --git a/src/components/Organization.tsx b/src/components/Organization.tsx index 2b213b7..3955f6e 100644 --- a/src/components/Organization.tsx +++ b/src/components/Organization.tsx @@ -1,13 +1,16 @@ import '../css/organizations.css'; +import '../css/carousel.css'; type OrganizationProps = { title: string; desc: string; + className: string; + onClick?: () => void; }; -export default function Organization({ title, desc }: OrganizationProps) { +export default function Organization({ title, desc, className, onClick }: OrganizationProps) { return ( -
+
{title} diff --git a/src/css/carousel.css b/src/css/carousel.css index 5373094..cfdd993 100644 --- a/src/css/carousel.css +++ b/src/css/carousel.css @@ -7,24 +7,116 @@ .carousel-container { display: flex; flex-direction: column; +} + +.carousel-title { + margin: 0; + font-size: 1rem; + color: var(--standard-bw-text); + font-weight: 600; +} + +.carousel-wrapper { + position: relative; + display: flex; + flex-direction: row; align-items: center; + border-radius: 2rem; + background: var(--carousel-bg); + gap: 1rem; } +/* main carousel stage */ .carousel { width: 72rem; - background: var(--carousel-bg); height: 18rem; - border-radius: 2rem; padding: 1rem; - display: flex; - flex-direction: row; - align-items: center; - gap: 2rem; + position: relative; + overflow: hidden; } -.carousel-title { - margin: 0; - font-size: 1rem; - color: var(--standard-bw-text); - font-weight: 600; +/* card positioning */ +.carousel-item { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0.7); + opacity: 0; + transition: + transform 0.4s ease, + opacity 0.4s ease, + box-shadow 0.4s ease; + will-change: transform; +} + +/* ===================================================== */ + +/* OFFSETS */ + +/* ===================================================== */ + +.offset-2 { + transform: translate(90%, -50%) scale(0.75); + opacity: 0.8; +} + +.offset-1 { + transform: translate(50%, -50%) scale(0.9); + opacity: 1; + z-index: 2; +} + +.offset-0 { + transform: translate(-50%, -50%) scale(1); + opacity: 1; + z-index: 3; + box-shadow: 0 0 1rem gray; +} + +/* stylelint-disable-next-line selector-class-pattern */ +.offset--1 { + transform: translate(-150%, -50%) scale(0.9); + opacity: 1; + z-index: 2; +} + +/* stylelint-disable-next-line selector-class-pattern */ +.offset--2 { + transform: translate(-190%, -50%) scale(0.75); + opacity: 0.8; +} + +/* hide far cards */ +[class*='offset-3'], +[class*='offset--3'] { + opacity: 0; + pointer-events: none; +} + +/* arrow buttons */ +.carousel-arrow { + z-index: 10; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + border: none; + background: transparent; + cursor: pointer; + font-size: 2.5rem; + color: black; + transition: var(--site-transition); +} + +.carousel-arrow:hover { + scale: 1.1; +} + +/* left arrow */ +.carousel-arrow.left { + margin-left: 0.5rem; +} + +/* right arrow */ +.carousel-arrow.right { + margin-right: 0.5rem; } diff --git a/src/css/organizations.css b/src/css/organizations.css index c9b5613..32e46e0 100644 --- a/src/css/organizations.css +++ b/src/css/organizations.css @@ -5,6 +5,7 @@ background: var(--org-bg); padding: 1.25rem; color: var(--standard-bw-text); + cursor: pointer; } .org-metadata {