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

Responsive image slider/carousel built with SCSS and plain JS

#accessibility#sass/scss
Elaine 11,420

@elaineleung

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


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

AntoineC 1,180

@AntoineC-dev

Posted

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

1

Elaine 11,420

@elaineleung

Posted

@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
Ahmad_Mana 320

@UserAhmad2001

Posted

AMAZING

I like the details, good work.

1
Fat 850

@Fahatmah

Posted

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

Elaine 11,420

@elaineleung

Posted

@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
Fat 850

@Fahatmah

Posted

@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
Elaine 11,420

@elaineleung

Posted

@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 of 100% means 800px, and compared to 1000px, it's definitely smaller, so the browser will choose the 100% as the width. At 1400px wide, a width of 100% means 1400px; that means 100% here is larger than 1000px, and so the browser will choose 1000px as the width, leaving 400px of space around the container as margin (BTW you'd also need to use margin: 0 auto or margin-inline: auto to keep things centered).

In short, writing width: min(100%, 1000px) is like combining width: 100% and max-width: 1000px together! I recommend that you just try it out, and the more you play with it, the more it will make sense 😊

Happy testing!

3
Fat 850

@Fahatmah

Posted

@elaineleung Thank you very muchiee!😀

1
Jishan 290

@jish0101

Posted

Nice 🐱🏵️

1

Elaine 11,420

@elaineleung

Posted

@jish0101 Thank you Jishan 😊

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