Carousel

Skill Level: 
Intermediate

A carousel, or slider, provides a way to have a gallery or series of slides of content that are automatically advanced.

The carousel plugin provides the styles and interactivity. To use this plugin, you'll need to follow these markup instructions:

  1. Create a generic wrapper element <div> that will house the carousel and give it a class of flexslider.
  2. Add a list element <ul> and give it a class of slides.
  3. Add list item elements <li> for each slide of content you'd like to have displayed.
    Any content can be put into the list item as a slide. The most common use is to include an image element <img>. Each slide should be the same size to avoid awkward styling.
  4. Load the carousel plugin with <script>WDN.initializePlugin('carousel');</script>
    Please note, you only need to run this script once per page. Putting it at the bottom of your content ensures that the carousel loads when ready.

Example

  • Cheerleaders posing with flexed arms
    The Husker Spirit Squad showed their tough side as they posed for photos by spectators Sunday afternoon. 2010 Big Red Road Show at Omaha Qwest Center on February 8, 2010. Photo by Craig Chandler / University Communications
  • Room full of graduating students in academic regalia; focused on a decorated mortar board with the message "Thank you Mom Dad I♥U
    Nina Lorincz of Omaha made her mortar board into a special message for her parents Saturday. December 2009 Undergraduate Commencement in Bob Devaney Sports Center. Photo by Craig Chandler / University Communications
  • A fully bundled up person outside on campus in a snowshorm with Hamilton and Avery Halls in the backgrond
    A December snowstorm caused the University to close at noon on December 8, 2009. Photo by Greg Nathan / University Communications
  • Football players tackling during a game at Memorial Stadium
    Ndamukong Suh and Larry Asante sandwich Kansas State quarterback Grant Gregory. University of Nebraska–Lincoln vs. Kansas State Wildcats football. Photo by Craig Chandler / University Communications
<div class="flexslider">
    <ul class="slides">
        <li>
            <figure>
                <img alt="Cheerleaders posing with flexed arms" src="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/carouselCheerleaders.jpg">
                <figcaption>
                    The Husker Spirit Squad showed their tough side as they posed for photos by spectators Sunday afternoon. 2010 Big Red Road Show at Omaha Qwest Center on February 8, 2010.
                     <span style="font-size:0.6em;font-style:italic">Photo by Craig Chandler / University Communications</span>
                </figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img alt="Room full of graduating students in academic regalia; focused on a decorated mortar board with the message &quot;Thank you Mom Dad I&heart;U" src="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/carouselGraduation.jpg">
                <figcaption>
                    Nina Lorincz of Omaha made her mortar board into a special message for her parents Saturday. December 2009 Undergraduate Commencement in Bob Devaney Sports Center.
                     <span style="font-size:0.6em;font-style:italic">Photo by Craig Chandler / University Communications</span>
                </figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img alt="A fully bundled up person outside on campus in a snowshorm with Hamilton and Avery Halls in the backgrond" src="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/carouselSnow.jpg">
                <figcaption>
                    A December snowstorm caused the University to close at noon on December 8, 2009.
                     <span style="font-size:0.6em;font-style:italic">Photo by Greg Nathan / University Communications</span>
                </figcaption>
            </figure>
        </li>
        <li>
            <figure>
                <img alt="Football players tackling during a game at Memorial Stadium" src="https://www.unl.edu/wdn/templates_4.1/examples/samplecontent/carouselFootball.jpg">
                <figcaption>
                    Ndamukong Suh and Larry Asante sandwich Kansas State quarterback Grant Gregory. University of Nebraska–Lincoln vs. Kansas State Wildcats football.
                     <span style="font-size:0.6em;font-style:italic">Photo by Craig Chandler / University Communications</span>
                </figcaption>
            </figure>
        </li>
    </ul>
</div>
<script>WDN.initializePlugin('carousel');</script>

Accessibility Considerations: 

  • All content included in the slides should contain all necessary accessibility markup, like alt attributes on images.
  • While the plugin provides some general help for accessible users to limit the advancing of slides while interacting or focusing on a slide of content, the transitions may cause issue for people with visual impairments.
  • You should avoid hiding the navigational, paging elements of the carousel as these provide useful targets for accessible users to quickly advance content. Keyboard shortcuts are enabled by default.

Usability Considerations: 

  • The use of carousels for anything other than photo galleries is generally discouraged. Research has shown that visitors often ignore this moving, changing content. Try to focus on a single piece of content or call-to-action in order to maximize the impact.
  • Hiding page content behind an interaction can frustrate visitors that a looking for a specific piece of content.
Contributed By: 
IIM