Responsive image slider/carousel built with SCSS and plain JS
Solution retrospective
I've been wanting to build a slider because one of the recent tutorials from Kevin Powell features an FEM page with a slider. The most challenging part wasn't building the actual slider but positioning all the SVGs and to make sure they can be viewed optimally while still maintaining a good distance/relation with the surrounding elements. It's also interesting that one of the requirements is to use arrow keys for the slider because I've read that for a screen reader user, it's best to have users use the tab key for navigation and not so much the arrow keys. I did come across some insightful articles on the challenges of building an accessible slider/carousel, and I do hope to work on this some more later. I also hope to put in some opacity transition later on, but I think on the whole, everything works for now, and I think this was a good attempt in building a slider that can be accessible.
Do let me know if something isn't working as it should. Happy testing!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mattari97
Hi Elaine. What an amazing work. This is the carousel you were talking about in the comment on my e-commerce solution. All smooth and beautiful.
Since you really focused on the accessibility I have a little something that you might wanna add to your solution.
You chose to not use the html disabled attribute, which according to this article is a good choice Making disabled buttons more inclusive but you may want to use the aria-disabled="true" attribute on the buttons when user reached the first slide (for the previous button) and the last slide (for the next button).
I think this is useful for users with a screen reader.
Again, very clean solution. Awesome !
Peace.
Marked as helpful - @UserAhmad2001
AMAZING
I like the details, good work.
- @Fahatmah
Awesome Work!
I am currently working on this challenge since these past few days and right now I am still stuck 😅. I kind of did the same markup structure but I thought it was inconsistent or like it would not work in that way so I entirely changed it 😣. Then I saw your work and I realized I should have continue my markup because I was also styling that and the background images and the buttons was working fine but now is a big mess 😄.
- @jish0101
Nice 🐱🏵️
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