Breadcrumb

Carousel Slider

Carousel sliders are available as custom blocks. These carousels can be used as a gallery (Galleria is recommended) or more commonly as heroes to be placed in the Hero Panel Content of nodes. Carousels can have one image, multiple images, or use one video. Each slide adjusts in height based on the image ratio. 

Each slider in your carousel can display text (title, subtitle, and a button link) that will have an underlay. This text can either be left, right, or center justified by altering option settings. If a Carousel is used on a basic page in the primary content area (non hero content area), it ignores the sizing parameters of "default", "medium", and "large". 

Due to the automatic slider nature of carousels, it is not recommended to mix and match videos, nor is it recommended to add more than one video. This will pose an accessibility issue, as the video will continue playing even after it scrolls to another slide. 

carousel example - genomics
Slide on a carousel without text

To create a Carousel

  1. From the admin toolbar panel, navigate to Structure ->Block Layout -> Custom Block Library
  2. Click on the +Add custom block button.
  3. From the list of available blocks, click on Carousel Slider.
  4. Configure the available options (outlined below).
  5. By default, the block is in draft and will not display to those viewing the site, only to authenticated (logged in) users. Once you are ready for the updates to publish, change the state to "Published". 
  6. Click Save to finish.

Configure Each Slide

Available options for each slide include:

  • Background - Select the image or video. 
  • Text - (optional) 
    • Slide Caption - this serves as a title for the slide
    • Slide Subtext - this serves as a subtitle or very brief description
    • Button Text - the text that will be shown as a button
    • Button Link - the link for the button (allows for internal and external links)
  • Options - Aligns the text left, right, or centered with a semi transparent overlay on top of the background image. Using left or right takes 50% of the side and center will center the overlay vertically. 
  • Revision information  - any time you make an update to this block it's recommended that you include a brief description of the change.

Removing Slides

To remove carousel sliders from displaying, it isn't enough to remove the image, you will need to click on the "Remove" button to the right of the slider you wish to remove. 

Add Carousel to a Basic Page

  1. Open a Basic Page previously created by clicking on the content's title that you want to display the basic block. 
  2. In the view where Panelizer is displayed, click on "Manage Content"
  3. Select "Custom"
  4. Find the block description of the carousel block created and click on the block. 
  5. It is best to check off the option to display title for carousels. 
  6. Select the region of the page to display the block (by default, it will be added to "Primary Content")
  7. Click Add

The carousel slider block has now been added to the selected region of your page. This block can be placed on multiple pages. Follow the instructions above, or for Site Builders, you can use block placement to add a custom block to multiple nodes at once.