Examples
Headless
The carousels from the front page, each one with the markup and the CSS that produced it.
How to read them
Every card below is a working carousel. Preview runs it, Code shows exactly what produced it in React — and the code has two switches of its own. The previews themselves are the React build; the code follows the framework you picked.
- Markup — Accessible carries the roles, labels, keyboard handler and live region from Accessibility; Minimal strips them down to the bare structure.
- Styles — Tailwind writes the contract as classes, CSS prints the stylesheet those classes stand for.
- The
</>button adds the import line and expands the block; the one next to it copies the snippet.
Examples
Default
01
02
03
04
05
Custom arrows with default dots
01
02
03
04
05
Autoplay
01
02
03
04
05
Dots animation "Sliding"
01
02
03
04
05
Slides animation "Fade-in"
01
02
03
04
05
JSX Elements
Itachi Uchiha
Highly skilled ninja from the Uchiha clan known for his prodigious talent, stoic demeanor, and the tragic choices he made in order to protect his village and younger brother Sasuke.
Kakashi Hatake
He is a ninja and a former member of the elite Konoha's Team 7, known for his enigmatic personality, iconic mask, and the Sharingan eye he acquired during a pivotal event in his past.
Madara Uchiha
Legendary figure from the Uchiha clan, known for his exceptional combat prowess, mastery of the Sharingan, and his ambitious goal to bring about a world ruled by his own vision of peace through the creation of an ideal utopia known as the Infinite Tsukuyomi
Naruto Uzumaki
He is a spirited and determined ninja who strives to become the strongest and Hokage, the leader of his village, while carrying within him a powerful and unpredictable source of energy called the Nine-Tails, which he learns to control and harness for the greater good.
Gaara
He possesses a unique ability to manipulate sand, which he uses both as a powerful defense and an offensive weapon, while also undergoing a profound transformation from a lonely and misunderstood individual to a strong and compassionate leader.
Sasuke Uchiha
Incredible ninja that is Fueled by a desire for vengeance against his older brother Itachi, Sasuke walks a path of darkness, seeking power and redemption while grappling with inner turmoil and the intricate dynamics of his relationships.
Build your own
None of these are presets — they are the same hook with different CSS around it. The playground puts every option next to a live carousel and prints the call, the accessible markup and the CSS your settings need, ready to paste.