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:
- Create a generic wrapper element
<div>
that will house the carousel and give it a class offlexslider
. - Add a list element
<ul>
and give it a class ofslides
. - 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. - 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
<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 "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
- Printer-friendly version
- Log in to post comments