Carousels Don’t Have to be Complicated - The Media Temple Blog
If you have to use a carousel, it doesn’t have to be complicated. Chris runs through some of the options out there. It turns out you can get surprisingly far with CSS alone.
I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.
If you have to use a carousel, it doesn’t have to be complicated. Chris runs through some of the options out there. It turns out you can get surprisingly far with CSS alone.
I like this nice straightforward approach. Instead of jumping into the complexities of the final interactive component, Chris starts with the basics and layers on the complexity one step at a time, thereby creating a more robust solution.
If I had one small change to suggest, maybe aria-label might work better than offscreen text for the controls …as documented by Heydon.
You just take some normal HTML markup, wrap it with a custom element, and then write some JS to add capabilities which you can then style with regular CSS! Everything’s of the Light Side of the Web. No need to pierce the Vale of Shadows or whatever.
I think Eric’s approach here should be the default for most web components: you probably don’t need to mess around with the shadow DOM, and you should definitely be wrapping your web component around existing HTML instead of witing opening and closing tags with nothing in between.
Augment, don’t replace.
A plea to let users do web things on websites. In other words, stop over-complicating everything with buckets of JavaScript.
Honestly, this isn’t wishlist isn’t asking for much, and it’s a damning indictment of “modern” frontend development that we’ve come to this:
- Let me copy text so I can paste it.
- If something navigates like a link, let me do link things.
- …
This is an excellent case study!
The technical details are there if you want them, but far more important is consideration that went into every interaction. Every technical decision has a well thought out justification.
An exception to my general rule that ARIA attributes should be added with JavaScript.
Apply your ARIA attributes with JavaScript and then use them as hooks in your CSS.
Under-engineering, over-engineering, wombling free.
Pseu-pseu-pseudo classes
A few things to remember if you’re going to using position:fixed.