Developer › Tutorials for Web Developers & Designers › Content & Image Rotators

Rotating Image Banners

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 <ss: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 <ss:layout:rotator> control should be supplied with an unordered list <ul>, where each <li> specifies the content of a "slide" or rotator item:

<ss:layout:rotator id="featured_rotator"> <ul> <li><ss:standard:image width="100%" height="500" maintainaspect="crop" src="https://images.unsplash.com/photo-1543575172-e1033f739205?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8NXx8YWJzdGFjdHxlbnwwfHx8fDE2MzE1MTQxMjQ&" /></li> <li><ss:standard:image width="100%" height="500" maintainaspect="crop" src="https://images.unsplash.com/photo-1544438825-f1222acc39dc?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mjd8fGFic3RhY3QlMjBzbGlkZXxlbnwwfHx8fDE2MzE1MTQyMTg&" /></li> </ul> </ss:layout:rotator>

Adding Next / Previous Navigation

To add next / previous buttons to the rotator, add the attributes moveNextId and movePreviousId to the <ss: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 <ss: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".

Adding Text & Buttons

To finish this tutorial, the example below adds some text elements, buttons, and some additional CSS styles to position text appropriately within the rotator.