Description

The Carousel component was designed to allow the display of a list images in a compact format. The images are presented in a group. If the list contains more images than the number of items set for the group, the display automatically cycles to a new group.

Configurations

Component 

  • Title
  • If the title should be displayed on the page
  • An introduction text
  • Color Style
  • Width as a percentage of the width available for the component
  • Image size (small, medium, large, XL, 2XL)
  • Number of columns
  • Column gap
  • Navigation (Yes/No)
  • Autoplay (Yes/No)
  • Loop (Yes/No)
  • Show item titles (Yes/No)
  • Placement (inline, top of page content, bottom of page content, etc.)
  • Container Settings

Container Settings

Container settings allows the configuration of the container housing the component. It allows the following settings:

  • Padding (in px): top, right, bottom, left. Defaults to 0px for all.
  • Margins (in px): top, right, bottom, left. Defaults to 32px in the bottom.
  • Border (in px): top, right, bottom, left. Defaults to 0px for all.
  • Border Radius (in px): defaults to 0px.
  • Border Color
  • Background
    • Color
    • Text Color
    • Extend text color to items or not
    • Opacity (%)
    • Blur (in px)
    • Media (image / video)
      • Parallax Effect (for Image only)

Component Item

  • Title
  • Image
  • Link

Example with 80% width

Example with 4 images in 3 columns, color style blue, small images, navigation and autoplay set to YES. 

Container settings configured with an blurred (4px) background image and 20px padding all around. Text color set to white to contrast with the dark image in the background.

  • APB Carousel 1
    APB Carousel 1
  • APB Carousel 2
    APB Carousel 2
  • APB Carousel 3
    APB Carousel 3
  • APB Carousel 4
    APB Carousel 4

Example of Inserted carousel in simple content

This example combines two different components: Simple Content and Carousel.

The Simple Content is used to create a section on the page with 2 columns. The first is used for some text and the second is a region where we insert our carousel.

Container settings for the Carousel was configured with a video in the background and padding all around.

The Carousel component on the right was configure with one column. This makes the images of the carousel be displayed as a slideshow, cycling automatically through all the carousel items.

We added 3 items to our carousel, with Color Style set to Orange, Navigation set to yes, Autoplay set to yes and Loop set to yes.

Column Gap is ignored when One column is selected.

Inserted into SC

  • APB Carousel 1
    APB Carousel 1
  • APB Carousel 2
    APB Carousel 2
  • APB Carousel 3
    APB Carousel 3