Very similar to tablists, carousels also help to split up a page's content into smaller and thus more digestible parts which can be toggled visible one at a time.
Carousels are well known especially from photo galleries. They offer a list of controls (usually on top of the element) which allow to toggle the visibility of corresponding panels. Only a single control can be active at a time, so exactly one panel is visible and all others are hidden.
We do not call carousels "sliders" so the difference to the slider pattern (selecting a value in a min/max range) is obvious.
Before you continue, please read Tablist widgets (or: tab panels, tabs) to understand why carousels are extended variants of tablists, simply providing additional controls like previous/next buttons, and sometimes autoplay functionality.
General requirements
The following requirements are based on well established best practices; unlike most other common widget patterns, the WAI-ARIA Authoring Practices do not offer a section about carousels.
In addition to the tablists' requirements, and besides many other requirements, we want to stress out explicitly the following:
Previous/next buttons allow to toggle through available slides (optional).
Autoplay functionality toggles through available slides automatically (optional).
Autoplay functionality must be pauseable.
Proof of concept
Based on the tablists' proof of concept, with additional controls:
<p><button>Focusable element before</button></p><divclass="carousel"><h1class="visually-hidden">
flowers (carousel)
</h1><pclass="visually-hidden">
Carousel help: use the carousel controls to toggle the visibility of their respective panels (below the controls).
</p><fieldsetclass="controls"><legendclass="visually-hidden">Carousel controls</legend><divclass="control"><buttonaria-pressed="true"data-carousel-autoplay=""data-carousel-id="carousel_flowers">Autoplay</button></div><divclass="control"><buttondata-carousel-direction="previous"data-carousel-id="carousel_flowers">Previous</button></div><divclass="control"><inputchecked=""class="visually-hidden"id="carousel_flowers_panel_rose"name="carousel_flowers"type="radio"value="carousel_flowers_panel_rose" /><labelfor="carousel_flowers_panel_rose"><spanclass="visually-hidden">Show panel rose</span></label></div><divclass="control"><inputclass="visually-hidden"id="carousel_flowers_panel_tulip"name="carousel_flowers"type="radio"value="carousel_flowers_panel_tulip" /><labelfor="carousel_flowers_panel_tulip"><spanclass="visually-hidden">Show panel tulip</span></label></div><divclass="control"><inputclass="visually-hidden"id="carousel_flowers_panel_sunflower"name="carousel_flowers"type="radio"value="carousel_flowers_panel_sunflower" /><labelfor="carousel_flowers_panel_sunflower"><spanclass="visually-hidden">Show panel sunflower</span></label></div><divclass="control"><buttondata-carousel-direction="next"data-carousel-id="carousel_flowers">Next</button></div></fieldset><divclass="panel"id="carousel_flowers_panel_rose_panel"style="display: block"><h2class="visually-hidden">
rose (panel)
</h2><h3>
Some info about rose
</h3><p>
Bla bla bla... all about rose...
</p><p><imgalt="A beautiful rose"src="..." /></p><p>
A link to a page with <ahref="#">more infos about rose</a>!
</p><h3>
More elements can come here related to rose
</h3><p>
Maybe even some form element where you can enter a name for your rose: <inputtype="text" /></p></div><divclass="panel"id="carousel_flowers_panel_tulip_panel"style="display: none"><h2class="visually-hidden">
tulip (panel)
</h2><h3>
Some info about tulip
</h3><p>
Bla bla bla... all about tulip...
</p><p><imgalt="A beautiful tulip"src="..." /></p><p>
A link to a page with <ahref="#">more infos about tulip</a>!
</p><h3>
More elements can come here related to tulip
</h3><p>
Maybe even some form element where you can enter a name for your tulip: <inputtype="text" /></p></div><divclass="panel"id="carousel_flowers_panel_sunflower_panel"style="display: none"><h2class="visually-hidden">
sunflower (panel)
</h2><h3>
Some info about sunflower
</h3><p>
Bla bla bla... all about sunflower...
</p><p><imgalt="A beautiful sunflower"src="..." /></p><p>
A link to a page with <ahref="#">more infos about sunflower</a>!
</p><h3>
More elements can come here related to sunflower
</h3><p>
Maybe even some form element where you can enter a name for your sunflower: <inputtype="text" /></p></div></div><divclass="visually-hidden"id="alerts"></div><p><button>Focusable element after</button></p>
Autoplay functionality is implemented using a simple timer that clicks the "Next" button every 2 seconds, as long as the "Autoplay" button has aria-pressed="true", see Marking elements activatable using aria-pressed.
The autoplay functionality can be toggled: it simply changes the value of aria-pressed="true".
It is important that the autoplay button is before the radio buttons in the DOM, so screen reader users can disable it before interacting with them.
Using .carousel:focus-within .control label, a style can be applied to all radio button labels upon interacting with the carousel.
This gives users a clue that they are interacting with a single control now (indicating to use the Arrow keys instead of Tab to navigate through carousel items).
It also separates those controls clearly from other controls like Autoplay, and previous/next, which are accessed using Tab key.
By giving the "Autoplay" a dedicated style (bold) upon [aria-pressed="true"], its status is also perceivable to visual users.