Carousel ("Slick Slider" Gallery)

This code will create an image gallery (carousel) that the user can click through. It does not include captions, and the images don't auto-advance. We call it the "slick slider carousel" on Web Team. View example.

When to use the carousel

Carousels are useful to quickly display a variety of visual information like photos of a room or event announcements in a limited space, allowing users to browse through different offerings without overwhelming them with too much information at once.

When to not use the carousel

While carousels can be visually appealing, they may not always be the best choice for every web page. Research has shown that user engagement on carousels is low. If you have information that is urgent, it's best to not hide it on the second or later slide in a carousel.

Example

DVM courses on tablets.
The vetmed lounge. Two chairs with small tables.
Ways to Wellbeing on a leafy and wood background.
Dave Provosts photo in a circle
Framed Photos of cute dogs available at the paws for a break event at the Vetmed Library
<div class="slick-slider-carousel"> <div> <img src="image.jpg" alt="Please include alt text for our users who use screen readers."> <div class="carousel-caption">Caption text.</div> </div> <div> <img src="... </div>

Settings

Randomize slide order

Add the data-randomize attribute to the slick-slider-carousel div and set it to true.

<div class="slick-slider-carousel" data-randomize="true"> ...
Updated