Carousel Slideshow

You can place a carousel on any web page, creating a slideshow of photographs that will display one image at a time. A carousel can be in the body of the page or a full-width banner across the top. 

A carousel:

• Can contain any number of photographs, with a minimum of 3
• Automatically cycles through each photograph
• Allows you to optionally add captions and/or links 

Preparing Your Images

All of your images should be checked in an image editor, such as Photoshop. They may need to be cropped and resized before they can be used. Here are our instructions for resizing images in Photoshop.

Before making your carousel, review each photo's file properties. 

• Image resolution: 72
• Width on the page:
  • full-width = 750 pixels
  • less than full-width = 737 pixels
• All carousel images must have exactly the same pixel dimensions, both height and width.
  • Photos with different dimensions will cause the text around and below it to jump up and down as each new image appears, which can be distracting, annoying, etc.

When your web-ready images are saved, they can be uploaded to a Cascade subfolder under /your-site/images/... 

Adding a Carousel

Once your images are uploaded to Cascade, create a carousel by following these steps:

1. In Cascade, go to the page where you want to add a carousel and click the Edit button at the top.

2. Create a new Content Row, and move it to where you would like the carousel to appear. 

3. In the new row, set the column Type to Carousel.

4. In the Column Width section, choose how wide on the page you would like your image carousel to be. Consider the readability of any text that will appear next to it.

   • If the carousel is less than full-width, resize the row above or below it to account for the carousel's column width. The total column width in a content row must be 12 (100%).

5. Under the first Item, select the first image you would like to include. If it's not in the Recent tab, go to the Browse tab and locate your image upload folder.

6. In the Image Alt Text, include a brief description of the images. This is required for accessibility purposes.

7. If you wish to add a caption, use the Content editing window.

8. When finished with the first image, you can add an additional one using the green + button at the right of the Item header. You will also be able to re-order and remove items using the arrow and X buttons or the dotted "drag" icon.

9. Your carousel should include a minimum of three images. A carousel with only one or two images may not display or function properly.

10. Preview the page.
    You can do this either while editing with the Show Edit Preview link at the top, or by selecting Preview Draft, which will save your work and take you out of the editor. You can then review the carousel and the rest of the page to make sure it is all correct. If more work is needed, just click on Edit again. 

11. When you are satisfied with the preview, Submit your changes with the button at the top right of the window.