Carousel Text

Eyebrow: 38 characters.
Title: 65 characters
Body Copy: 150 characters
Description: 50 characters
Caption: 92 characters
CTA: 24 characters
Tabs: 35 characters

The Carousel Text component is a Carousel component that allows the user to navigate through a series of slides that contain text and images. It is composed of a content area and a slider with a image/video area.

Go to Figma Design

Features

Alignments: Each slide support two alignments: left and right. Where left place the image on the left side and the text on the right side. Right place the image on the right side and the text on the left side.
Desktop Navigation: Users will be able to navigate through the slide by:
- Click and dragging the slides.
- Clicking over the navigation arrows.
- Clicking over the tabs. (Each slide will be associated with one tab with no max number of slides)
- Clicking over the pagination buttons. (Each slide will be associated with one pagination with no max number of slides)
Mobile Navigation: Users will be able to navigate through the slide by:
- Swiping through the slides.
- Clicking over the pagination buttons. (Each slide will be associated with one pagination with no max number of slides)

Integration Notes

Aspect Ratio It is important to set the aspect ratio of the image to maintain the correct size. The aspect ratio must be set depending on the image size. Commonly the formula is width / height.
Alignments Variants We need to support two alignment variants for the each slide of the Carousel Text. It must come from Sitecore.
Images We need to support receiving from Sitecore images for mobile, tablet, desktop, and desktop large.
Configurable Slider The Carousel Text component must be configurable to enable or disable the autoplay and loop slider.