Rotating Image Banners
Oncord's UI Controls API includes a pre-built rotator, which helps reduce development time, while providing users with an
improved experience updating content via the visual editor.
Some notable features of the Oncord rotator:
- May be placed and configured via the visual page editor.
- Supports html content and other Oncord UI controls such as sections, not just images.
- Supports YouTube videos, where videos are stopped between slides.
- Customize the rotator controls with your own images or icons.
- Supports responsive content.
- Customize the transition time and effect to be used between slides (slide or fade).
- Show multiple content items per slide (eg. 4 testimonials per slide).
Introducing The Rotator UI Control
You can add a rotator to a website page or design through use of the <layout:rotator> UI Control.
Alternatively, a rotator can be added to the page via the visual editor. Click "Insert" on the left-hand side of the screen while editing a website page, and drag-and-drop a "Rotator" element into position on the page.
In order to take advantage of all the features and possibilities of the rotator UI control, take note of all the "Attributes" available in the API reference here.
The <layout:rotator> control can handle any standard content. Each direct child of the rotator will be turned into its own slide.
Custom Next / Previous Links
The rotator includes standard next / previous controls, however you can alternatively add custom links instead.
Place your custom navigation elements within links that are assigned with unique IDs.
Add the attributes moveNextId and movePreviousId to the <layout:rotator> control, where the IDs that you provide correlate to the IDs used by your next / previous buttons.
Set the attributes arrowVariant="none" minimapVariant="none", to remove Oncord's default rotator navigation elements.
- HTML
- CSS