Tailor Element: Carousel

Create a slider with multiple images or text using the carousel element.

Create a slider with multiple images or text using the carousel element.

A carousel is a Tailor element. If you’ve never used Tailor before, read the intro tutorial first.

A carousel is a container element, meaning it contains one or more items, which act as the independent slides of a carousel. Each item, in turn, contains a content element. If desired, you can delete the content element and replace it with other elements such as boxes or cards.

  1. Drag the Carousel element onto the page or post you’re editing
  2. Click on the carousel element near an edge (not on the placeholder text); a blue outline should appear around the entire carousel
  3. Click in the Carousel element box and select Add to add additional slides
  4. Click Edit in the top right corner
  5. Select Style of your Carousel by choosing either Default or Slider
  6. Select how many Items per row you would like to display: 1, 2, 3 or 4
  7. Ignore the Minimum item height field
  8. Choose to either Fade your Carousel content or not (only when displaying 1 Item per row)
  9. Edit the Content box to add text and/or media to each slide of the carousel

Carousel examples

Carousels save space. They’re ideal for expendable content that your visitors may want to browse. Since they “hide” content on multiple slides, they are not suitable for important information.

You can display multiple slides at once by increasing a carousel’s items per row (step six in the tutorial above). The example below shows two items per row. 

A carousel of images works best if all images are the same size.

The carousel above has the fade transition toggled on. Notice how the images stay “still” as you arrow forward. The carousel below has the fade transition turned off (which is the default); this produces a sliding transition between the individual carousel elements.