search

ufssd / ufssd-website

Source for https://ufssd.org
MIT License
2 stars 1 forks source link

Add image carousel #34

Closed Brian-Magnuson closed 6 months ago

Brian-Magnuson commented 7 months ago

Resolves #31. Adds an image carousel to the landing page. The image carousel is from this npm package: https://www.npmjs.com/package/react-responsive-carousel .

image

Brian-Magnuson commented 7 months ago

Currently, the image carousel is designed to span the entire width of the screen and be 600px tall. If the image is too big, it is resized via the object-fit: cover CSS property. A limitation I noticed was how right-clicking the image accesses the image behind the carousel, which is currently the background image for the page. Also, while adding the image, I noticed that the background image has a limited height and eventually cuts off revealing the gradient behind.

Brian-Magnuson commented 7 months ago

Added issue #36 so that any current issues involving this image carousel may be addressed

Brian-Magnuson commented 6 months ago

Looks good. I made one last-minute change: I found out that if you add the preventMovementUntilSwipeScrollTolerance prop to the ImageCarousel, it improves scrolling on mobile (Google Chrome). That is, touching the carousel will still allow vertical scrolling on the page. pointer-events: auto is pretty neat. I never knew that could work. Will merge shortly. Thank you!

WillBAnders commented 6 months ago

I didn't know about pointer-events: auto either; I was looking through the styles via inspector and found pointer-events: none was being added by the library and disabling that solved the problem.