Add simple image slides with navigation #1415
Conversation
…arrow if more than one image
Gatsby Cloud Build Reportdeveloper-website-develop 🎉 Your build was successful! See the Deploy preview here. Build Details🕐 Build time: 2m PerformanceLighthouse report
|
| } | ||
| alt="placeholder-text" | ||
| css={css` | ||
| height: ${height}px; |
There was a problem hiding this comment.
Setting the height does some weird things on mobile:
And it also looks like it squishes images a bit (depending on the aspect ratio). I wonder if there's a way we can avoid this 🤔
There was a problem hiding this comment.
yeah i made the images object-fit: contain on mobile screens (smaller than 760px) because seeing the entire image (where you can click and see it in full resolution in another tab) seemed slightly better than seeing small portion of the image where you can't really discern what it is.
i adjusted so it's full width and fixed height on mobile. looks okay, but TBH not sure what best option there is.
for the squishy-ness on those medium-large screens. i adjusted that in the new PR so it doesn't squish / distort so much.
|
Closing in favor of animated version #1417 |
Description
Adds simple image slider (without the sliding animation for now) and arrows to navigate to next / prev image.
Does not show nav arrows if only one image
Reviewer Notes
Wasn't sure what looked best for images either clipped on smaller screen or scaled down.
Related Issue(s) / Ticket(s)
Related to:
#2#1405Screenshot(s)
2021-06-21_14-22-57.mp4