DeveloperTutorials for Web Developers & DesignersContent & Image Rotators

Custom Rotator Controls

This article discusses the customisation options available for the Oncord rotator control. If you haven't read the Rotating image banner article yet, it would be best to view this article before attempting the below customisations.

What can be Customised?

The Oncord rotator can be completely customised to suit your desired branding and colour scheme. Each of the following elements of the rotator can be customised:

  • The buttons which make the rotator move to the next and previous items. These elements can be any hyperlinked <a> element on the page. Usually this is a custom arrow image placed on either side of the banner. (See the arrow images in the image above).
  • A slide selector which lists a number of small icons, which correspond to each rotator item. (See the small circles in the image above).

Customising The Next / Previous Elements

As discussed in the rotating image banner article, the rotator next and previous control elements are defined by setting the "movenextid" and "movepreviousid" attributes on the rotator.

See the below example of the opening <ss:layout:rotator> tag of a featured homepage rotator.

The next and previous element ids are set to "featured_rotator_next" and "featured_rotator_previous". A hyperlinked <a> element  on the page is then given the corresponding id. For example, the next slide button would be defined as:

Customising The Slide Selector Element

You can use our pre-defined rotator slide selector controls, or create your own custom rotator controls for use on the Oncord rotator. Lets take the following example of a featured homepage rotator: 

The attribute "classcontrols" is used to define the extra rotator controls. We have already defined the following classes for you which can be used right out of the box. Simply insert the desired classes in the "classcontrols" attribute:

  • Bottom or top
  • Left or right
  • Square or round
  • Dark or light

In addition to the above classes, you can also define your own custom classes. In the above featured homepage rotator example, the custom class has been called "mycustom". This class would be defined in CSS as "layoutRotatorControls.mycustom".

For example, to do some basic custom styling of the controls: