Ticker Component

Overview
The Ticker Component: A Custom AEM Solution for Scrolling Text and Images

Ticker Component Ticker Component Ticker Component

The Ticker component is a custom AEM component that provides a scrolling ticker-style display, allowing users to showcase dynamic text and images in an engaging manner.

Ticker Component

Features

Autoplay functionality for automatic scrolling.
Navigation buttons for manual scrolling.
Close button to remove the ticker from view.
Customizable text, images, and styles.
Flexible icon and title styling options.

Functionality

Users can add multiple ticker items consisting of text and images.
The ticker can be configured to autoplay or be navigated manually.
Customization options for title, icons, borders, colors, and layout.

Dialog Properties

1. General Configuration

Title – Option to add a title.
Title Icon – Option to add an icon along with the title.
Autoplay – Option to enable autoplay for ticker items.
Navigation – Option to enable navigation buttons on the right.
Close Button – Option to enable the close button on the right.

2. Items Configuration

Items (MultiField) – Option to add multiple ticker items.
- Item Text – Option to add text content.
- Item Image – Option to add an image next to the text.

3. Icon Style Configuration

Icon Size – Set icon size.
Colour – Set icon colour.
Background Color – Set background color for the icon.
Margin – Set margin for the icon.
Boxed – Enable boxed property for the icon.
Box Size – Set size of the icon box.
Border Type – Set border type for the icon box.
Border Width – Set border width.
Border Radius – Set border radius.
Border Color – Set border color.

4. Title Style Configuration

Tag – Set tag for the title.
Font Color – Set color for the title.
Background Color – Set background color for the title.
Border Style – Set border style.
Border Color – Set border color.
Border Radius – Set border radius.
Border Width – Set border width.
Padding – Set padding.

5. Text Image Style Configuration

Size – Set size for the image.
Border Radius – Set border radius.
Left Margin – Set left margin.
Right Margin – Set right margin.

6. Text Style Configuration

Tag – Set tag for text.
Color – Set text color.
Background Color – Set background color for text.
Padding – Set padding.
Margin – Set margin.

7. Navigation Style Configuration

Arrow Previous – Option to add a previous navigation icon.
Arrow Next – Option to add a next navigation icon.
Size – Set navigation icon size.
Color – Set icon color.
Space Between Arrows – Set space between icons.
Boxed – Enable boxed property for navigation icons.

Usage Instructions

Add the component to an AEM page.
Configure images and content for each ticker item.
Customize styling and effects as needed.
Preview and publish to activate the ticker.

Additional Notes

Ensure images are optimized for better performance.
Choose appropriate styling to enhance readability.

Conclusion

The Ticker component adds an engaging scrolling effect to AEM pages, allowing dynamic content display with extensive customization options.

Take the next step

Curious but Not Convinced? Reach out to us! Let’s build something extraordinary together. Partner with us and discover the difference.

Bite sized conversation

Business Enquiry

Send us a email

General Enquiry

Send us a email saying hello

Social connect