The Oncord UI Controls API includes a pre-built rotator to help reduce development time.
Some notable features of the Oncord rotator:
Supports general html content, 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.
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.
To add next / previous buttons to the rotator, 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.
You can also add a slide selector element, which appears as a series of "dots", allowing the user to see the number of rotator
items and quickly navigate between them. To do this, add the attribute classcontrols to the <layout:rotator> control.
Within the classcontrols attributes, some standard classes are available to help position the elements. Simply insert the desired classes:
Dark or Light
Bottom or Top
Left, Right or Center
Square or Round
You can define your own custom classes if you wish. As an example, you could add the class "mycustom", which would then be
defined in CSS as "layoutRotatorControls.mycustom".
To finish this tutorial, the example below adds some text elements, buttons, and some additional CSS styles to position text appropriately
within the rotator.
