Keeping it simple: coding a carousel

The article argues that carousels should stay simple and work even when JavaScript is unavailable. It uses an ordered list as the core structure, adds a container class to activate the behavior, and keeps the visible state on a single current item.

Reading notes

#

• A carousel can start as an ordered list inside a container.
• The basic CSS positions the box relatively and hides overflow so only one item is visible at a time.
• One class on the container activates the carousel behavior, and one class marks the current item.
• The JavaScript keeps state with a counter, updates the current element by moving the class, and uses buttons for navigation.
• The code relies on querySelector and classList, so it checks for support before proceeding.
• Transition, opacity, and transform can add visual polish without changing the core structure.
• pointer-events: none is used in the stacked version so hidden items do not capture links.
• The article closes by questioning whether every widget needs to be made generic and highly configurable.