Working Carousel V1

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 (
-        <>
-            <div className="carousel-container">
-                <div>
-                    <span className="carousel-title">{type}</span>
-                    <div className="carousel">
-                        <Organization
-                            title="Math Club"
-                            desc="The RPI Math Faculty approved and Union affiliated math club!"
-                        />
-                        <Organization
-                            title="Math Club"
-                            desc="The RPI Math Faculty approved and Union affiliated math club!"
-                        />
-                        <Organization
-                            title="Math Club"
-                            desc="The RPI Math Faculty approved and Union affiliated math club!"
-                        />
-                    </div>
+        <div className="carousel-container">
+            <span className="carousel-title">{type}</span>
+
+            <div className="carousel-wrapper">
+                <button className="carousel-arrow left" onClick={moveLeft}>
+                    ‹
+                </button>
+
+                <div className="carousel">
+                    {organizations.map((org, index) => {
+                        const offset = index - active;
+                        return (
+                            <Organization
+                                key={index}
+                                className={`carousel-item offset-${offset}`}
+                                title={org.title}
+                                desc={org.desc}
+                                onClick={() => setActive(index)}
+                            />
+                        );
+                    })}
                 </div>
+
+                <button className="carousel-arrow right" onClick={moveRight}>
+                    ›
+                </button>
             </div>
-        </>
+        </div>
     );
 }

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 (
-        <div className="org">
+        <div className={`org ${className}`} onClick={onClick}>
             <div className="org-metadata">
                 <div className="image-placeholder"></div>
                 <span className="org-title">{title}</span>

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;
 }

src/css/organizations.css

@@ -5,6 +5,7 @@
     background: var(--org-bg);
     padding: 1.25rem;
     color: var(--standard-bw-text);
+    cursor: pointer;
 }
 
 .org-metadata {