A carousel or slider is a design element that cycles through multiple pieces of content, either automatically or when users interact with it. In TIME Sites, there are two main ways to add one to your website:

If you want to create a carousel of images that has forward/back controls, allowing users to scroll manually through the images, you should use the Image Gallery Element. This will also allow users to open each image in a lightbox view when they click.
If you want a simple carousel that automatically changes images on a preset timer, you can use the Background Image panel to add multiple images to a container, and turn on the "auto cycle" option.

TIME Sites does not currently support carousels / sliders that contain mixed content (images plus text, buttons, etc.) To achieve that you'll need to create a carousel interaction or use one of our TIME Sites carousel blocks.

This article describes how to create the second type mentioned above -- an image carousel/slider that automatically rotates on a timer.

Add the Carousel Container to the Page

First add the element that you want to contain the carousel, by dragging a new container element from the left toolbar onto the stage:

Add Background Images

Then open the Background Image panel from the right toolbar, or choose "Background Image Controls" from the "Window" menu.

Click 'Add Image' to upload an image from your local drive, or just drag images from the media library into the '+' drop zone.

You'll see the images you've added appear as small thumbnails within the panel:

Cycle Background Images

In the Background Image Panel, check the "Cycle Background Images" box to make your images cycle automatically:

Images will cycle in the order they appear in the Background Image panel, from left to right. If you want to change the order, just drag the thumbnails to rearrange them.

The timer dropdown allows you to set the rate, in seconds, at which the images cycle. By default, this delay is set to 2 seconds.

To learn more about the Background Image panel, including how to scale and position background images within elements, refer to this article.

Should I Use a Carousel at All?

A note on carousels and usability: there's good evidence showing that carousels actually reduce conversion (the rate at which users interact with content), and that users are less likely to read and retain information when it is presented to them via a carousel.

Research also shows that engagement falls off dramatically after the first slide, meaning that content on subsequent slides may never be seen by most users.

For these reasons, it's generally not considered good design practice to use them to convey important information, or to get users to click on a CTA -- particularly in the critical "hero" area of your website. Focusing on a single primary message and action is far more effective.

(Of course, carousels may still be appropriate for certain situations -- in particular to allow users to browse through content, such as a gallery of images.)