Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Testimonial Slider(HTML5, CSS, JS, Grid)

shajedโ€ข 730

@shaj-ed

Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


any feedback are wellcome! slider buttons looks breakdown mate will change it :D

Community feedback

Faris Pโ€ข 2,810

@FarisPalayi

Posted

Looking good๐Ÿ‘

Slider buttons are working correctly on my device, only problem is that when you try to change the image fast or when the images are not fully loaded. The former is happening because there is a setTimeout() delay and the latter can be solved by adding a preload meta tag

<link rel="preload" href="./images/blah.jpg" as="image">

One thing to note is that, the content will only shown after the images are fully loaded.

Also, try to add an aria-label or title attribute to 'previous' and 'next' buttons for better accessibility.

Furthermore, I suggest you to give a fallback image in the HTML, as a safety measure if JavaScript fails.

That's all from me. Have fun codingโœจ

Marked as helpful

0

shajedโ€ข 730

@shaj-ed

Posted

@FarisPalayi thanks for the suggestions

1

Please log in to post a comment

Log in with GitHub
Discord logo

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