-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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>
- Loading branch information
1 parent
df3ccb8
commit 117ec1a
Showing
12 changed files
with
136 additions
and
6 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 */ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters