Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add a Arrow button to move through the gallery so it's clear this is gallery component #1388

Closed
3 tasks done
jpvajda opened this issue Jun 8, 2021 · 1 comment · Fixed by #1417
Closed
3 tasks done

add a Arrow button to move through the gallery so it's clear this is gallery component #1388

jpvajda opened this issue Jun 8, 2021 · 1 comment · Fixed by #1417
Assignees
@roadlittledawn @rudouglas
Labels
design needed enhancement New feature or request estimate needed o11y public library sp:5 Story Point(s): 5
Milestone
[DevEn] Sprint 7

Comments

@jpvajda
Copy link
Contributor

jpvajda commented Jun 8, 2021 •
edited by zstix
Loading

Issue

The image gallery scrolls which is cool but it only shows it's scroll-able by showing the browser scroll bar. This works for people that have this enabled in a browser, but not for those that disable this browser feature.

References

  • Definitely look at the many gallery components that exist to get some ideas of this should work..
  1. https://react-bootstrap.github.io/components/carousel/
  2. https://reactjsexample.com/responsive-and-flexible-carousel-component-with-thumbnail-support/

If we need design decision we can ask @danielgolden for a pattern we've used before.

Acceptance Criteria

  • add a Arrow button to move through the gallery so it's clear this is gallery component.
  • On click, stop the gallery in the middle of an image
  • As the images slide, keep the gradient fading on the right side of the image Related to: Fade the gallery image on the right hand side #1385
@jpvajda jpvajda transferred this issue from newrelic/newrelic-quickstarts Jun 9, 2021
@jpvajda jpvajda added this to the [DevEn] Sprint 6 milestone Jun 9, 2021
@jpvajda jpvajda removed this from the [DevEn] Sprint 6 milestone Jun 14, 2021
@rudouglas rudouglas self-assigned this Jun 16, 2021
@roadlittledawn roadlittledawn mentioned this issue Jun 21, 2021
Closed
@rudouglas rudouglas added the sp:5 Story Point(s): 5 label Jun 22, 2021
@roadlittledawn roadlittledawn mentioned this issue Jun 22, 2021
Merged
@jpvajda jpvajda added this to the [DevEn] Sprint 7 milestone Jun 22, 2021
@LizBaker LizBaker linked a pull request Jun 23, 2021 that will close this issue
Add animated image slider #1417
Merged
@zstix
Copy link
Contributor

zstix commented Jun 23, 2021

This has been completed in PR #1417

@zstix zstix closed this as completed Jun 23, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@roadlittledawn roadlittledawn

@rudouglas rudouglas

Labels
design needed enhancement New feature or request estimate needed o11y public library sp:5 Story Point(s): 5
Projects
None yet
Milestone
[DevEn] Sprint 7
Development

Successfully merging a pull request may close this issue.

Add animated image slider newrelic/developer-website
4 participants
@jpvajda @zstix @roadlittledawn @rudouglas