Skip to content
Submitted over 2 years ago

Mobile first slider with an attempt at making it accessible

Emma•320
@emjogale
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Coding bootcamp testimonials slider
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I have had a go at making the slider accessible but would like some feedback on how to improve this. I also struggled with the positioning of the background images - any advice on this would also be welcome!

Community feedback

  • Marvin Baga•310
    @mjbagaPosted over 2 years ago

    Hi, Emma. Good work on the slider!

    Nothing much to say except maybe a few ideas on transition of the slides. Small animations just make the user experience better. Some things you can try:

    • Slide animation, usually you declare a long width so that you can place your slides side by side and use overflow-hidden to hide that slide. Then you can play with transform translate rule and use transition. Or even use animate CSS rules.
    • Fade in, fade-out, is much easier, you just stack the slides up and fade in the the new slide.

    Oh, lastly, maybe a better hover effect than shadow on the buttons. Maybe background change instead.

    Hope this helps! Happy coding.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord