Structure

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

Provide structural markup for the carousel and its items, and later enhance these structures with styling and scripting. This ensures that the content of the carousel has meaning on its own, without styling and scripting, and can be rendered and used in more situations.

Note: A carousel is typically a distinct part of a web page, so that a heading (<h1> to <h6>) is typically needed to identify and label the carousel.

A carousel is a collection of items that are displayed one at a time. Provide a corresponding structure in the code to represent this collection of items.

List of items

In many situations, the carousel items are fairly brief so that a simple a list (<ul>) with individual list items (<li>) is sufficient to represent the carousel. See the example below for a demo of this robust approach:

Code snippet: 
<div class="carousel">
    <ul>
        <li class="slide">…</li>
        <li class="slide">…</li>
        <li class="slide">…</li>
    </ul>
</div>

Set of articles

If carousel items are have a lot of complex content, other elements can be used for the carousel framework. For example, HTML5 provides the <article> element, which is useful for carousels with items that are independent pieces of content. Make sure to provide headings for each article. The example below shows the use of <article> elements to represent a carousel.

Code snippet: 
<div class="carousel">
    <article class="slide">
      <h4>…</h4>
      …
    </article>
    <article class="slide">
      <h4>…</h4>
      …
    </article>
    <article class="slide">
      <h4>…</h4>
      …
    </article>
</div>

Item structure

Also provide proper structure for content within individual carousel items. This makes them independent pieces of content that can be rendered and used in different ways. Refer to the tutorials on headings and images for more background on how to provide these types of content.

Brief content

In the following example, the carousel items only consist of an image each, so that a simple list was used to represent the carousel. The carousel itself is identified using a heading, and the text alternatives are considered for the images of the carousel items. The code provides structure and meaning, even without any styling and scripting added.

Code snippet: 
<h3>Photos of our trip to Paris:</h3>
<div class="carousel">
  <ul>
      <li class="slide">
          <img src="path/to/image.jpg" alt="Alternative text">
      </li>
      <li class="slide">
          <img src="path/to/image.jpg" alt="Alternative text">
      </li>
      <li class="slide">
          <img src="path/to/image.jpg" alt="Alternative text">
      </li>
  </ul>
</div>

Complex content

This example also uses a list, even though the carousel items consist of more substantial content than in the previous example. This approach was selected as the individual carousel items are not independent pieces of content and thus not suitable for the <article> element. The individual list items include a heading, text, and links each.

Code snippet: 
<h3>Featured Articles:</h3>
<div class="carousel">
    <ul>
        <li class="slide" style="background-image: url('teddy1.jpg');">
            <h4>Space Teddy production reaches all-time high</h4>
            <p>
                Teddies in Space Inc. has released outstanding numbers for the last solar year.
                <a href="…">Full Annual Report</a>
            </p>
        </li>
        <li class="slide" style="background-image: url('teddy2.jpg');">
            <h4>New Space Teddy Announced!</h4>
            <p>
                Space Teddy 6 wears an aluminum space suit. Sapphire glass eyes are first used universe-wide.
                <a href="…">Everything about the new model</a>
            </p>
        </li>
        <li class="slide" style="background-image: url('teddy3.jpg');">
            <h4>Adventures of the Space Teddy</h4>
            <p>
                Using modern HTML5 technologies, the latest installment of our game performs great on your computer, tablet, or mobile.
                <a href="…">Play the Game here!</a>
            </p>
        </li>
    </ul>
</div>

At this stage the carousel does not have any functionality. This is added later using scripting, based on the class names of the elements. If scripting is not enabled for various reasons, including bad network connection or user choice, the functionality would not work anyway.

This does not prevent you from providing the basic styling for the carousel so that it looks appropriate even when scripting is not enabled. In many cases carousels are styled with background images and overlaid text, so that color contrast ratio considerations are relevant.

The example below shows how the carousel structure from the previous example is styled. It uses semi-transparent backgrounds behind the overlaid text, to ensure sufficient color contrast to the background image.

Note: The carousel demo in this tutorial has a fixed-width implementation to keep the tutorial simple.

Example:

Featured Articles:

  • Space Teddy production reaches all-time high

    Teddies in Space Inc. has released outstanding numbers for the last solar year. Full Annual Report

  • New Space Teddy Announced!

    Space Teddy 6 wears an aluminum space suit. Sapphire glass eyes are first used universe-wide. Everything about the new model

  • Adventures of the Space Teddy

    Using modern HTML5 technologies, the latest installment of our game performs great on your computer, tablet, or mobile. Play the Game here!

Success Criteria:

Techniques: