
Homepage with lightweight scrollable slider
Design comparison
Solution retrospective
Nothing super special in this solution. But I do feel like a lot of the things I've been learning over past solutions (and the learning paths) are getting better and more efficient. I continue to focus and pay attention to accessibility, while also now paying more attention to lighthouse scores.
I am proud of using a very lightweight solution for the slider that relies mostly on CSS with a little bit of JavaScript for the next/previous buttons.
Community feedback
- P@JosielLimaPosted 3 months ago
What I missed was a transition/animation between the slides and the scroll bar (Google Chrone) which deviates from the design proposal. The solution using clip in the hidden class was excellent, I didn't know about it. However, on the mdn website there is a notice that "This feature is no longer recommended. While some browsers may still support it, it may have already been removed from relevant web standards, may be in the process of being dropped, or may be kept for compatibility purposes only. Avoid using it and update existing code"
0P@elisilkPosted 3 months agoHi @JosielLima,
Thanks for the feedback. Working on some better transitions/animations would definitely improve my solution.
So I can investigate further the specific issue you raise, can you include a link to the MDN page with the quote that you reference?
Thanks, Eli
0P@JosielLimaPosted 3 months ago@elisilk
Link: https://developer-mozilla-org.translate.goog/en-US/docs/Web/CSS/clip?_x_tr_sl=en&_x_tr_tl=pt&_x_tr_hl=pt&_x_tr_pto=tc
Style /* ----- UTILITIES ----- */
.visually-hidden { border: 0; clip: rect(0 0 0 0); height: auto; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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