Carousel

A Component to create an image slideshow with text, links, and slider controls.
When only one slide is created, the Carousel component looks like a Banner image with text and a button link.

Summary

The Carousel component can be added to a Landing Page and creates either a single-image banner or a multiple-image slider with controls. An optional button link to another page can be added. 

Audience

  • Web Managers create new Carousels on Landing Pages.
  • Publishers can edit and save Carousels on existing Landing Pages. 

Learn more about Platform User Roles and Permissions. 

How To Create a Carousel

  • Create a New Band

    • On a Landing Page, first create a new One-Column Band.
    • Note: The Band Width setting you select impacts the look of your Carousel. Experiment with each Band setting to get the look you prefer. 
    The Band width you select will impact the appearance of your Carousel.

  • Add a Carousel

    A hand cursor is ready to add a component within a band
    • Inside the Band, select the Add Component button.
    • Select Carousel from the Choose Component dialogue box. 
    Choose a component dialogue menu with Carousel selected.

  • Select a Banner Type

    The Create New Carousel dialogue appears. Fields with an asterisk (*) are required.

    create new carousel dialogue box
    • Select a Banner Type (*) - Choose the desired format from the dropdown menu:
      • Container, Widescreen (Default)
      • Container, Letterbox
      • Full-Width, Widescreen (This option looks like Container, Widescreen, but the image extends to the edges of the screen (like the main menu).
    • Note: The combination of Band Width setting you selected and Carousel Banner Type you choose impacts the look of your Carousel. Experiment with each setting to get the look you desire. 
    Banner Type menu.

  • Slide Settings

    Expand the Slide Settings field. Fields with an asterisk (*) are required.

    Slide settings fields for image, category, heading and slide text are filled in with information.

    Slide Settings

    • Slide Image (*) - Choose or upload an image for the slide. Always add Alternative Text when uploading a new image to the Media Library. The minimum recommended image size is 3840 (w) x 1200 (h). Example: A coach helps a young boy hold a bow and arrow.
    • Slide Category - Write a short, general description of the content in the Carousel. In the published Carousel slide, this text appears first in a smaller text in italics. 
      Example: Blog
    • Slide Heading - Write a title to describe the specific content in the Carousel. In the published Carousel slide, this text appears second in large text. 
      Example: Archery
    • Slide Text - Write a short description of the content in the Carousel. In the published Carousel slide, this text appears third in medium-sized text. 
      Example: Youth Archery Workshop Hits the Mark. 

    Slide Link Button

    • URL - If desired, provide a URL to automatically create a button-style link. For internal links, search for the page or document title to point to the node. For external links, paste the full URL.
      Example: Dates Announced for Youth Archery State Competition (51). This is an internal link to a Digital Commons page, also identifiable as node 51.
    • Link Text - Briefly describe the destination page or document. Follow accessibility best practices for meaningful links.
    Slide Link fields for Carousel Slide Settings

    Save

    Save the Carousel. A Carousel with only one slide is a banner, as shown in the example below. 
    Note: There are no Slider Controls on a banner. 

    When only one slide is created, the Carousel component looks like a Banner image with text and a button link.
    A Carousel component containing only one slide appears as a Banner. 

    Hide Slide

    • Hide Slide - Hiding the slide prevents website visitors from seeing it, but allows you to keep the content and reuse it later.
      • Check the box to hide the slide.
      • Uncheck the box to show the slide.
    Hide Slide checkbox.

  • Add Slide

    To create a slider of several images, add more slides to your Carousel. 

    • Select Add Slide.
    Carousel Add Slide button.
    • Repeat the steps outlined in Slide Settings for each new slide.
    • Select Add Slide to add as many slides as desired. 
    Editing view of a Carousel with two slides.
    Example: Editing view of a Carousel with two Slides. 

    To remove an existing slide:

    • Click Remove for that particular slide.
    Carousel Remove Slide button

  • Slider Controls and Autoplay Interval

    Carousel slide about birdwatching with a woman holding a pair of binoculars to her eyes.
    Example: Second slide in a Carousel slider with Slider Controls overlaid on the bottom right corner of the image. 

    When two or more slides are added to the Carousel, Slider Controls are added to the bottom right corner of the Carousel on top of the images.

    By default, the Autoplay Interval is Disabled and the slideshow does not play. The visitor must select the slides or the play button in the Slider Controls if you do not set an Autoplay Interval. 

    Slider controls appear on a Carousel. The default setting does not animate. An autoplay interval must be selected to play the slideshow automatically.
    Example: Autoplay Interval is Disabled by default. 

    To animate the slider, choose an option for the Autoplay Interval from the dropdown menu: 

    • Disabled
    • 3 Seconds
    • 5 Seconds
    • 10 Seconds
    • 20 Seconds
    Carousel Autoplay Interval menu.
    Accordion
    Tab/Accordion Items

    First Sidebar
    July 8, 2025

    Example Carousel

    This example is a two-slide Carousel with an Autoplay Interval of 5 seconds. This video contains no audio.

    This video is of a Carousel containing two slides with an Autoplay Interval of 5 seconds. 

  • Save

    • Select the Save button at the bottom of the page. 
    Carousel Save button.