Carousel

Styles: Gallery has two styles:

  • default
  • Simple Gallery (with thumbnail items showing below main images)

Following properties can be set for a Gallery:

  1. automatic transtion of the slides
  2. invinite loop for automatic slide transition
  3. titled pagination -> items inside the Gallery can be given a name/title
  4. full width
  5. placement of the transition arrown at the bottom;
    arrows are placed in the middle per default

 

Carousel component accepts only two types of componets:

  • Hero
  • Media

 

Important:
Items inside the gallery must be of the same height, carousel will not scale the items insite of Carousel.
One should not mix and match: in carousel items use either or - Hero or Media.
One can resize & position the Carousel using AEM OOTB Layout Grid.

Mixed Assets one aspect ratio

Carousel with three different type of Media inside:

  1. Media with Video YT,
  2. Media vith Video Self-Hosted
  3. Media with Static Image.

All assets and if desired to use, Thumbnails must be set to the same Redention - in this case it's 12x5.

Default style settings (drak theme, arrows on the sides, default view style).

Mixed Assets with transcripts

Carousel with Media inside. Media with Video YT, Media vith Video Self-Hosted & Media with Static Image.

Aspect ratio of all assets is set to the same Rendition - 12x5.

Carousel with YT Videos - Default Style

Carousel with Media inside: Media with Video YT and cover image.

All items need to be set to the same Redention - in this case, it's 16x9.

Video Transcripts are linked to two out of three YT videos.

Default Carousel Style.

 

Carousel with YT Videos - Gallery Style

Carousel with Media inside: Media with Video YT and cover image.

All items need to be set to the same Redention - in this case, it's 10x3.

Video Transcripts are linked to two out of three YT videos.

Gallery Carousel Style.

 

Carousel Arrows Bottom

Carousel with Media inside: Media with Video YT and cover image.

All items need to be set to the same Redention - in this case, it's 10x3.

Video Transcripts are linked to two out of three YT videos.

 

Full Width View

Carousel 10x3 in default style set to full width.

 

Titled Pagination Default Style

Carousel with Media inside. Media with Video YT, Media vith Video Self-Hosted & Media with Static Image.

Aspect ratio of all assets is set to the same Rendition - 12x5.

Media are with Transcripts.

Style is set to Default. Arrows are set to Default.