We use cookies to customize content for your viewing and for analytics. If you continue to browse this website, we will assume that you are happy to receive all our cookies. For further information please read our cookie policy.
Carousel Slide Group
The Carousel Slide Group is a component designed to showcase dynamic content across the full width of a webpage. This component can accommodate both image and video files
Key Features:
- Full-width display: Maximizes visual impact and creates a visually immersive experience.
- Text overlays: Add text elements (e.g., headlines, captions) directly over the images or videos
- Flexible usage: Suitable for both hero display and mid-page display
- Multiple slides: Display up to 7 slides within a single Carousel Slide Group
The Carousel Slide Group component implementation involves two key steps: creating an Experience fragment and configuring the component on your web page. Experience fragments serve as the content source for the carousel. Refer to the detailed guide on experience fragments for detailed instructions on creating experience Fragments.
After creating your Experience Fragment, navigate to the target web page where you wish to incorporate the carousel. Add the Carousel Slide Group component to the page. Next, specify the desired number of slides for your carousel. Access the component's configuration settings by clicking the wrench icon. Within the configuration panel, you'll find separate tabs for Desktop and Mobile Experience Fragment settings. In each tab, use the search functionality to locate and select the path to the corresponding Experience Fragment you created.
After configuring the Carousel Slide Group component and before publishing your web page, ensure that the associated Experience Fragment is also published. Publishing the web page will not automatically publish the Experience Fragment content displayed within the carousel. These are separate publication processes and must be performed independently.
Carousel Slide Group
Transition Effects
Slide in: Smoothly change between successive slides in a carousel display
Fade In: A transition between slides by gradually increasing the opacity of the incoming slide while the outgoing slide fades out
Scroll options
Dots:
Thumbnails:
Thumbnails
Animation Speed
Transition speed between slides (in milliseconds)
Support infinite scrolling
Allows the carousel to scroll infinitely by looping the slides
Autoplay slides
Carousel automatically scrolls the slides when selected
Disable auto pause on mouse hover on slides
Select to disable auto pause on mouse hover on slides
Disable Arrows
Disables display of arrows on slides
Align HCP Banner
Allows you to change alignment of HCP banner displayed at top of page
Color options
Options for changing the color the color of text and backgrounds of local navigation, HCP banner, etc.
Carousel: Slide
Hide controls from standalone video
Hides standalone video controls when hovering on video
Margin
Margin creates space around an element, pushing other elements away from it. These work in percentages
Select option for parsys display in mobile
Bottom of slide:
Over on the slide
Desktop
Mobile
