Hi Arturo,
It would really help you if you didn't position everything absolutely. That's causing problems at a lot of screen sizes here. Instead let most elements have default positioning, using techniques like minus-margins and z-index where needed, and for the bits that do need absolute positioning, position them against a nearby parent element that is position relative.
I'd also recommend you play with layout techniques like flex instead of relying heavily on margins and paddings to lay out elements.
Other tips:
- If you use other css properties than display none and block, you could have nice transitions between slides
- you only need one set of buttons (maybe they could be position absolute against the slides wrapper)
- If not going to allow users to click next / prev on a continuous loop (i.e. go back to the first slide if clicking next on end of array), then you should disable whichever button cannot do anything
- I'd add focus states to buttons
- Try to use classes to manipulate the dom rather than adding inline style attributes
- use a different technique to wrap text on two lines in your .name-plate (not padding 25%) as this is making it wrap onto three lines unnecessarily on my phone
Hope these are helpful ideas. There are lots of good examples of accessible sliders with nice animations on codepen if you want to head there and look for more inspiration.
1
