Carousel Block
Carousels can help to engage users by presenting them with a visually appealing and interactive way of exploring different content options. The Carousel Block has three (3) different styles each shown below.
One Slide Viewable
Best when needing to add additional copy to the slide.
Multiple Slides Viewable
It is recommended that Carousel 2 be used on a full-width page. Slides include a heading and CTA.
One Slide Viewable (inline controls)
Best when used as a photo-gallery carousel. Slides are still clickable but with no CTA.
One slide Viewable settings:
- Number of Slides Viewable
- You can define the number of slides that appear on the page by selecting either 1 or 3 slides viewable.
- The option “1 slide viewable” is the default option and will display only 1 slide at a time. The slide width will span across the entire width of the containing element.
- Inline Controls
- Inline controls are only viewable when the Number of Slides Viewable selector has the “1 slide viewable” option selected.
- Inline controls allow the carousel arrow buttons for next and previous and dot controls for carousel navigation to appear in different ways depending on the selected option.
- By default inline controls are disabled making the carousel controls display below the carousel. When inline controls are turned on the controls will appear on top of the carousel with the arrow buttons removed.
Three Slides Viewable settings:
- Number of Slides Viewable
- By selecting the option “3 slide viewable” the carousel will display 3 consecutive slides at one time. Each slides width will span 1/3 across the entire width of the containing element, allowing 3 slides to be viewable at once.
One Slide Viewable (inline controls) settings:
- Number of Slides Viewable
- In order to view the Inline Controls option Number of Slides Viewable selector must be have the “1 slide viewable” option selected.
- Inline Controls
- By enabling the Inline Controls the carousel controls will appear on top of the carousel with the arrow buttons removed.
- Remove bottom padding
- This option allows the default bottom padding to be either added or removed. By default the bottom padding option is disabled. This will keep the default block bottom padding in place.
Slide Content:
- Carousel Image
- Select an appropriate image that serves as the main feature of the slide. It is recommended to use a 16:9 image ratio and select an image that is at least the same width as your page width.
- Carousel Heading
- Give your carousel a heading. These are pre-defined heading styles based on the UNCG brand guide.
- Spotlight Blurb
- Useful for short, one or two-sentence descriptions for the slide.
- Link
- What is the URL you want people to go to if they click on this slide.