A&S Web Guide

A helpful guide to web content and accessibility for the Faculty of Arts & Science, University of Toronto community.

You are here: Home / Drupal Guide / Carousels

Carousels

How to Create a Carousel

⚠ Note: The styling of carousels has degraded over time. While they are still functional, aesthetically, they are not ideal. As such, we no longer recommend using carousels. If you still wish to, you may use the instructions below.

Example carousel slide one.
Example carousel slide two.

Carousels are a great way to highlight groups of similar special content, like a series of student testimonials, research projects or brief alumni profiles. They can include text, images or both.

To add a carousel to a page:

  1. Click on the Insert Carousel icon in the page’s editing panel.

Carousel icon in the CKEditor.

  1. A window will pop up with several fields to fill in:

Pop-up window to add carousel content.

  1. Carousel Set Title: Enter a basic title for this carousel set. This won’t be visible to the public, but it is mandatory. Drupal requires content to have a unique ID.
  2. Number of Carousels: Select the number of slides you’d like to use in this carousel (two to nine).
  3. Carousel #1 Title, Carousel #2 Title, etc.: Enter a title for this carousel if you wish (it’s optional). It will be visible to the public.
  4. Carousel #1 Content, Carousel #2 Content, etc.: Enter any text into this field. Use placeholder text for now since you won’t be able to add formatting (e.g., links, headings, etc.) until you press “OK” below.
  5. Press OK (the green button at the bottom of the pop-up window).
  6. Now you can add content. Click into the carousel and start typing or pasting text, adding headings, adding hyperlinks, adding images, etc.

Pop-up window to choose which content goes in which slide.

  1. Press Save at the very bottom of the page to publish the carousel.

⚠ Tip: Only using text in your carousel slide? The carousel is a fixed width and height – you can manually align your text vertically and horizontally by adding spaces or dividing it into multiple paragraphs.

Adding Images to a Carousel

Want to add an image to a carousel slide?

Recommended Image Dimensions
Maximum height: 225 pixels. Larger images will be automatically scaled down to this height.

How to Add an Image to a Carousel
Place your cursor to the left of the text and click on the Add media icon to upload or choose a photo.

How to Delete a Carousel or Carousel Slide

  1. Open the carousel editing panel by:
    • Double-clicking on the carousel, or,
    • Clicking on the carousel, and then clicking on the Insert Carousel icon in the editing panel

The carousel icon in the CKEditor.

  1. Find Remove a Carousel Element:

Pop-up menu to choose which carousel element to remove.

  • If you’re only looking to delete one or more slides from your carousel, select its corresponding title from the drop down menu.
  • No longer interested in the carousel on your page? Select Remove this Carousel Element to delete the entire carousel and all of its contents.