Carousels

Available on
iastate22
Sites+

If you need to showcase multiple images or videos within one area of your page, consider a Carousel. Each slide contains an option title, body, and caption.

To begin, you will need to login to the site and navigate to the page that the Carousel is located on. After clicking "Edit" at the top of the page, click the pencil in the upper right-hand corner of the Carousel and select "Configure."

Add content to a Carousel

Add a title to your Carousel and click the dropdown arrow beside “+ Add Image Slide” to choose to add either an image slide or a video slide. Feel free to mix and match both image and video slides in a Carousel.

Add content to a Carousel instructions

Add an image slide

If you’re adding an image slide, you are required to upload an image by clicking “Choose File” and give it appropriate alternate text, but all other fields are optional, including Title, Caption, and Body.

Choose File instructions

Add a video slide

If you are adding a video slide, you are required to insert a YouTube or Vimeo link. All other fields are optional, including Title, Caption, and Body.

Add a video slide instructions

Collapsing and rearranging slides

You can collapse slides by clicking on the “Collapse” button for an individual slide or collapse all slides by clicking “Collapse all” at the top.

Collapsing instructions

 

Collapsing slides makes them easier to rearrange, which you can do by dragging the multi-arrow “Move” icon in the left column of each slide.

Rearranging instructions

Update a Carousel

After you’ve adjusted the Carousel content to your liking, click “Update.”

Update Carousel instructions

 

Click “Save layout” at the top of the page to save your changes to update the live page.

Save Layout instructions

 

Now, you have a Carousel with slides you can move through using the arrows on the left and right, or with the dots along the bottom of the slide.

Carousel preview

Edit a Carousel

If you change your mind about the order of the Carousel slides or have other updates, you can go back and edit the landing page and the Carousel. When you make an edit to the Carousel, a yellow warning message and asterisk will appear to remind you that your changes are unsaved. You can save them by clicking the green “Update” button and remembering to click “Save layout” at the top of the landing page.

Edit a Carousel block instructions