Add image carousel (#34)

* Add image carousel from npm package

* Add new images to image carousel

* Remove unnecessary comments from ImageCarousel.module.css

* Remove more comments from ImageCarousel.module.css

* Rename image files with lowercase extensions to avoid case-sensitivity issues

* Use pointer-events: auto to re-enable img iterations (allows viewing full image)

* CSS hack to force a reasonable aspect ratio on mobile devices

* Add prop to ImageCarousel to allow better scrolling on mobile

---------

Co-authored-by: WillBAnders <WillBAnders@gmail.com>

package.json

@@ -16,7 +16,8 @@
   "dependencies": {
     "next": "^14.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-responsive-carousel": "^3.2.23"
   },
   "devDependencies": {
     "@types/node": "^20.8.9",

src/app/ImageCarousel.module.css

@@ -0,0 +1,30 @@
+.genericLink {
+  text-decoration: underline;
+  color: blue;
+}
+
+.genericLink:visited {
+  color: purple;
+}
+
+.imageCarousel {
+  display: flex;
+  justify-content: center;
+}
+
+.imageCarousel .container {
+  width: 100vw;
+}
+
+.carouselItem {
+  max-height: min(600px, 100vw / 2); /* hack to force reasonable aspect ratio */
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.carouselItem img {
+  object-fit: cover;
+  pointer-events: auto; /* disabled by react-responsive-carousel */
+}

src/app/image-carousel.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Carousel } from "react-responsive-carousel";
+import Image from "next/image";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import styles from "./ImageCarousel.module.css";
+
+type CarouselImage = {
+  src: string;
+  alt: string;
+};
+
+const images: CarouselImage[] = [
+  {
+    src: "ssd_pictures/ssd_meeting_google_fall_2022.jpg",
+    alt: "SSD members (about 20) at our Fall 2022 meeting with Google.",
+  },
+  {
+    src: "ssd_pictures/ssd_networking_event_fall_2022.jpg",
+    alt: "SSD members Yonas Bahre, Trevor Richardson, Blake Anderson, and Eric Navar at a Fall 2022 networking event.",
+  },
+  {
+    src: "ssd_pictures/ssd_zoom_meeting_summer_2020.png",
+    alt: "SSD members meeting online over Zoom during Summer 2020.",
+  },
+  {
+    src: "ssd_pictures/ssdinner_spring_2020.jpg",
+    alt: "SSD members having dinner together during Spring 2020.",
+  },
+  {
+    src: "ssd_pictures/ssd_meeting_bridgerock_data_spring_2020.jpg",
+    alt: "SSD members (about 30) at our Spring 2020 meeting with BridgeRock Data.",
+  },
+  {
+    src: "ssd_pictures/eric_navar_lighting_talk_fall_2019.jpg",
+    alt: "Former SSD president Eric Navar giving a lighting talk at a Fall 2019 meeting.",
+  },
+  {
+    src: "ssd_pictures/ssd_tabling_fall_2019.jpg",
+    alt: "SSD members tabling at the UF Reitz Union breezeway.",
+  },
+];
+
+export default function ImageCarousel() {
+  const carouselItems = images.map((image) => (
+    <div className={styles.carouselItem} key={image.src}>
+      <Image src={image.src} alt={image.alt} height={600} width={600} />
+      <p className="legend">{image.alt}</p>
+    </div>
+  ));
+
+  return (
+    <div className={styles.imageCarousel}>
+      <div className={styles.container}>
+        <Carousel
+          showStatus={false}
+          showArrows
+          showThumbs={false}
+          infiniteLoop
+          centerMode
+          centerSlidePercentage={100}
+          autoPlay
+          interval={5000}
+          stopOnHover
+          emulateTouch
+          preventMovementUntilSwipeScrollTolerance
+        >
+          {carouselItems}
+        </Carousel>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,4 +1,5 @@
 import styles from "./Home.module.css";
+import ImageCarousel from "./image-carousel";
 
 export default function Home() {
   return (
@@ -17,6 +18,7 @@ export default function Home() {
         </p>
         <h2>Fall 2023 Meetings</h2>
         <p>Tuesday, 6:15pm in CISE A101 and over Zoom</p>
+        <ImageCarousel />
       </main>
     </div>
   );