Carousels

Fantasized Draft, 28 March 2019Anchor Link

This version:

https://uga.dev/documents/fantasized-specs/html-carousel

Editors:

Hiroya Uga

Issue Tracking:

GitHub Issues

AbstractAnchor Link

This specification defines a mechanism for bringing standard accessibility to carousels (sometimes referred to as slider).

1. IntroductionAnchor Link

Carousel is a widget that has a lot of problems (mostly related to accessibility) in spite of high demand.

By standardizing the concept and interface of carousel widget as an element, we hope that issues such as accessibility and performance will be resolved.

2. ConceptsAnchor Link

3. APIAnchor Link

3.1. Related elementsAnchor Link

3.1.1. The carousel elementAnchor Link

The carousel element represents a carousel widget that can combine multiple pieces of content into a compact display.

The current attribute represent initial current position. If the current attribute is present, user agents must parse it as an integer, in order to determine the attribute’s value. The default value is 1.

The autoplay attribute is a boolean attribute. When present, the user agent will automatically begin slide of the carousel as soon.

The autoplay IDL attribute must reflect the content attribute of the same name.

The loop attribute is a boolean attribute that, if specified, indicates that the slide of carousel element is to seek back to the start of the slide upon reaching the end.

The loop IDL attribute must reflect the content attribute of the same name.

The controls attribute is a boolean attribute that, if specified, it indicates that the author has not provided a scripted controller and would like the user agent to provide its own set of controls.

If the attribute is present, or if scripting is disabled for the media element, then the user agent should expose a user interface to the user. This user interface should include features the pager buttons (next, prev), begin button for autoplay, pause button, and dot-Indicator for toggle to arbitrary slide in the carousel. Other controls may also be made available.

Even when the attribute is absent, however, user agents may provide controls to use of the carousel (e.g., swipe, keyboard interface), but such features should not interfere with the page’s normal rendering. The user agent may implement this simply by exposing a user interface to the user as if the controls attribute was present.

If the user agent exposes a user interface to the user by displaying controls over the carousel element, then the user agent should suppress any user interaction events while the user agent is interacting with this interface. (For example, if the user clicks on a carousel's pager control, mousedown events and so forth would not simultaneously be fired at elements on the page.)

Where possible (specifically, for toggling slide, and for toggling autoplay), user interface features exposed by the user agent must be implemented in terms of the DOM API described above, so that, e.g., all the same events fire.

The controls IDL attribute must reflect the content attribute of the same name.

The direction attribute controls the swipe direction of the carousel. It is an enumerated attribute with the following keywords .

• left - Slide left (right is next content)
• right - Slide right (left is next content)
• up - Slide up (bottom is next content)
• down - Slide down (top is next content)

The missing value default is the left state.

The type attribute switches the animation type when the carousel slides. It is an enumerated attribute with the following keywords .

• slide - Slide animation only
• fade - Fade out then fade in (without slide animation)
• fadeslide - Fade out then fade in with slide animation
• crossdissolve - Cross dissolve
• crossdissolveslide - Cross dissolve with slide animation

The missing value default is the slide state.

Also, the title attribute has special semantics on this element.

All child elements of the carousel element are interpreted as slides. Browsers that do not support this element will simply looks like lined up the flow contents of the child elements.

<style>
  carousel::slide {
    width: 33%;
  }
</style>

<carousel>
  <div>First slide</div>
  <div>Second slide</div>
  <div>Third slide</div>
  <div>Forth slide</div>
  <div>Fifth slide</div>
</carousel>

<style>
  carousel::slide {
    min-width: 200px;
    max-width: 33%;
  }
</style>

<carousel type="fadeslide" controls current="2" autoplay direction="right" loop>
  <div>First slide</div>
  <div>Second slide</div>
  <div>Third slide</div>
  <div>Forth slide</div>
  <div>Fifth slide</div>
</carousel>

3.1.2. The ::slide pseudo-elementAnchor Link

The ::slide pseudo-element is produced based on the carousel element's child elements.

The semantics of each slide inherit the semantics of the underlying flow content.

However, user agents are not actually interpreted the ::slide pseudo-element itself. The accessibility and semantics information that the carousel element exposed to the accessibility API causes such interpretation.

carousel::slide {
  width: 33%;
}

carousel::slide {
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

carousel::slide {
  /* for carousel supported browsers */
  min-width: 200px;
  max-width: 33%;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

carousel > * {
  /* for carousel not supported browsers */
  margin: 0 0 30px;
}

<style>
  carousel div > p {
    /* ... */
  }

  carousel::slide > p {
    /* The targets of this rule set are same previous one. */
    /* ... */
  }
</style>

<carousel>
  <div><p>lorem ipsum...</p></div>
  <div><p>lorem ipsum...</p></div>
  <div><p>lorem ipsum...</p></div>
</carousel>

3.1.3. The ::pager-next and ::pager-prev pseudo-elementAnchor Link

3.1.4. The ::dot pseudo-elementAnchor Link

3.1.5. The ::toggle pseudo-elementAnchor Link

3.1.5. The ::container, ::slide-track, and other wrapper pseudo-elements for layoutAnchor Link

• ::container
• ::slide-track
• ::slide-wrapper
• ::dots-wrapper
• ::pagers-wrapper

<carousel>
  <carousel::container>
    <carousel::slide-wrapper>
      <carousel::slide-track>
        <casousel::slide>#contents</casousel::slide>
        <casousel::slide>#contents</casousel::slide>
        <casousel::slide>#contents</casousel::slide>
      </carousel::slide-track>

      <carousel::pagers-wrapper />
      <carousel::pager-next />
      <carousel::pager-prev />
      <carousel::pagers-wrapper />
    </carousel::slide-wrapper>

    <carousel::dots-wrapper>
      <carousel::dot />
      <carousel::dot />
      <carousel::dot />

      <carousel::toggle />
    </carousel::dots-wrapper>
  </carousel::container>
</carousel>

3.2. User interfacesAnchor Link

3.2.1. SwipeAnchor Link

3.2.2. Pager buttonsAnchor Link

3.2.3. Dots indicatorAnchor Link

3.2.4. Toggle button (autoplay / pause)Anchor Link

3.2.5. KeyboardAnchor Link

3.3. CSS SelectorsAnchor Link

3.4. EventsAnchor Link

4. polyfillAnchor Link