Responsive image slider/carousel built with SCSS and plain JS
Design comparison
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!
Community feedback
- @mattari97Posted over 2 years ago
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 helpful1@elaineleungPosted over 2 years ago@AntoineC-dev Thanks for the useful info, Antoine, really appreciate it, and please keep them coming, as I've still got lots to learn about accessibility. Peace to you too 😊
1 - @FahatmahPosted over 2 years ago
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 😄.
1@elaineleungPosted over 2 years ago@Fahatmah Hey Fahatmah, I know what you mean; the background images nearly brought me to a state of tears 😅. Almost every time I thought I'm done, I'd see something else shift and then I'd try to fix that only to shift something else, but thankfully I saw the light at the end of the tunnel thanks to flexbox!
Yes, do keep going, even if you need to come back to it later, and if I could give some advice on this project, it would be to use
width: min()and padding for positioning. I don't usually use the height property unless I need to, and I definitely need to for some things here. If you already got the styling for the slider and frames, then you're pretty much good to go, and if not, just take the HTML and CSS for my image slider and test it out on CodePen. Good luck!2@FahatmahPosted over 2 years ago@elaineleung Oh the use of
width: min(), I know it but I don't really know how to use it 😅 and the nesting happening there makes my brain really confuse like how are those things works?0@elaineleungPosted over 2 years ago@Fahatmah No worries, my brain has been there too 😛
The
width: min()property helps to set the largest width you want, and within the parentheses, you just give the browser options to choose from in terms of the biggest width allowable.For example, if I put
width: min(100%, 1000px)on my main container, I'm telling the browser that at any size, it needs to choose the smaller one of these two values. If my browser is at 800px wide, a width of100%means 800px, and compared to1000px, it's definitely smaller, so the browser will choose the100%as the width. At 1400px wide, a width of100%means1400px; that means100%here is larger than1000px, and so the browser will choose1000pxas the width, leaving 400px of space around the container as margin (BTW you'd also need to usemargin: 0 autoormargin-inline: autoto keep things centered).In short, writing
width: min(100%, 1000px)is like combiningwidth: 100%andmax-width: 1000pxtogether! I recommend that you just try it out, and the more you play with it, the more it will make sense 😊Happy testing!
3
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