{carousel}

Slides in a row that scrolls and snaps sideways, with arrow links and dots - no JavaScript needed.

Widgets Tag pairs

Syntax 

{carousel} {tab 'caption'} ... {/tab} {tab} ... {/tab} {/carousel}
{carousel label='Name'} ... {/carousel}

Options

label
The carousel's name for a screen reader, Carousel when not given.

Description

{carousel} lays every {tab} inside it out as a slide in a horizontal row that scrolls and snaps (CSS scroll snap). Each slide has previous and next links, and below the row there is a dot per slide - plain links to the slides' ids, so the carousel works without JavaScript. The previous link of the first slide goes to the last and the next link of the last to the first. There is no autoplay.

The label of a {tab} is the slide's caption, and is optional here - unlike in {tabs} and {accordion}. label= names the whole carousel for a screen reader. The markup follows the WAI-ARIA carousel pattern: a region with aria-roledescription="carousel", each slide a group announced as "slide 2 of 4" with its caption.

A small script, written once per page with the CSP nonce when one is asked for, makes it smoother: the links scroll only the row instead of the page, and the dot of the slide in view is marked, also after a swipe. Scrolling is smooth unless reduced motion is asked for; printed, the slides stand under each other. Under the strict check a carousel that never closes, one without slides or with text between its slides is an error. The colours are --pad-carousel-accent, -text, -muted, -surface and -dot on .pad-carousel.

Examples

Three slides

Coloured slides with a caption each, named Colours for a screen reader.

Templateexamples/carousel/1-slides.pad 
{carousel label='Colours'}
  {tab 'Morning'}
    <svg viewBox="0 0 400 160" role="img" aria-label="A yellow sky"><rect width="400" height="160" fill="#fbd38d"/></svg>
  {/tab}
  {tab 'Noon'}
    <svg viewBox="0 0 400 160" role="img" aria-label="A blue sky"><rect width="400" height="160" fill="#90cdf4"/></svg>
  {/tab}
  {tab 'Night'}
    <svg viewBox="0 0 400 160" role="img" aria-label="A dark violet sky"><rect width="400" height="160" fill="#553c9a"/></svg>
  {/tab}
{/carousel}
Resultopen alone

Slides from data, no captions

A slide per row of the data; a carousel slide may go without a label.

Templateexamples/carousel/2-quotes.pad 
{carousel label='What customers say'}
  {quotes}
    {tab}<blockquote><p>{$text}</p><footer>{$name}</footer></blockquote>{/tab}
  {/quotes}
{/carousel}
PHPexamples/carousel/2-quotes.php 
<?php

  $quotes = [
    [ 'name' => 'Marieke', 'text' => 'Quiet, fast, and the light is a nice touch.' ],
    [ 'name' => 'Tom',     'text' => 'Boils quickly. The lid is a little stiff.'   ],
    [ 'name' => 'Aisha',   'text' => 'The keep-warm setting is perfect for tea.'   ] ];

?>
Resultopen alone

See also

  • {tab} One item of a tabs, accordion or carousel: its label and its content, handed to that owner.
  • {tabs} Panels behind a row of tabs, switched by radio buttons and CSS - no JavaScript.
  • {accordion} Items that open and close on a click, each a details element - no JavaScript.
  • {img} Writes a picture of the application's www directory as a thumbnail of the size the page shows it at, resized once with GD.