Hello, friends!
A little while ago I was surfing the web and I found a carousel that spun an element out and into view rather than just sliding, and I thought, “Oh, that’s cool!” When inspecting it, it appeared to be some kind of web builder feature and I was unable to look at the entirety of what was going on. So, I said what any person would say if they found something cool they wanted to use…
“I can probably make that!”
And I did!
Some information:
The original carousel was inaccessible to tabbing but mine is accessible to tabbing. It also did not have any kind of feature that prevented users from just endlessly clicking a button to spin the elements in and out super fast, so you could make a pretty nauseating experience if you wanted to (lol), but I have implemented a trigger that prevents the user from clicking until the animation ends. It is still a pretty quick window, but far better imo. There is also a switch for aria-hidden included. I may come back with some changes later on to include some switches if the user has JS enabled or not.
This is implemented with pure HTML, CSS, and JS so some of it may be a little unorthodox; however, I am super happy with how this turned out!
I would love some general feedback on how the code could be less complicated (if applicable).
Thank you!
Check it out here: Rotating Carousel