Carousel

Summary

The carousel band creates either a banner (a single image or slide) or slider (multiple images or slides). A carousel stretches the full width of a landing page and usually links to another page. However, you have the option to omit the link. 

Audience

Site managers and site admins can create carousels. Publishers have the ability to edit existing cards on a landing page and can access them through the band menu.

How To

Go to Landing Page > Add Band > Carousel.

1. Title: Typically you would not use a title with a carousel card. It appears only in the preview of the newly created card.

2. Text:

carousel steps 1-2

 

carousel steps 3-4

3. Child paragraph: Underneath the child paragraph heading, click on Add carousel to open the settings for carousels.

4. Banner type: Choose the desired format for your carousel: container, widescreen (default), container letterbox or full width, widescreen.

  • Container letterbox: The image must be at least 686 x 450 pixels.
  • Container, widescreen: The images must be at least 1140 x 450 pixels.
  • Container full width: The images must be 1440 by 550 pixels. This option looks like container, widescreen except that the image extends to the ends of the screen (like the main menu). 
carousel step 5

5. Autoplay options: Choose how long you want viewers to see each image before it switches to another slide. Select none for a single image. The options are: disabled (default), none, 3 seconds, 5 seconds, 10 seconds, or 20 seconds.

6. Slide settings, add media: Browse and upload an image that has been sized for the banner type selected. Larger image dimensions are fine but will be cropped by Drupal. The file types allowed are png, gif and jpg. 

  • Important: Add alt text to describe the image for site visitors with visual impairments. This is mandatory to maintain the accessibility of the website. 
  • Important: Ensure that you have permissions from the owner of an image to place on the website; failure to do so could lead to your agency being sued. Refer to your Communications Office if you have any questions about rights to images.
carousel steps 6-7

7. Slide category: Write a short, general description of the content you are linking to or presenting in the carousel. In the published carousel slide, this text appears first in a smaller text in italics.

8. Slide heading: Write a title to describe the specific content you are linking to or presenting in the carousel. In the published carousel slide, this text appears second in larger text in bold.

9. Slide text: Write a short description of the content you are linking to or presenting in the carousel. In the published carousel slide, this text appears third in medium-sized text.

10. Slide link button URL:  Enter the URL where a site visitor is directed after clicking on the slide. If the slide link button points to an internal URL, you only need to enter the relative (friendly) path of the URL, not the full URL. For an external site, include the full URL. In the published carousel slide, this URL appears fourth in a button format.

d8 carousel steps 8-11

11. Slide link title: Write a title describing the page you are linking to. In the published carousel slide, this text appears in the button with the URL. If you write in the title field but don't enter a URL, the text will appear in the button format but will not point to a link.

12. Add another item: With a single image, the carousel is a banner. To add additional slides to make it a carousel, select Add another item. Repeat the process to add as many slides as you wish. To remove an existing slide, select Remove for that particular slide.

13. Save.