<layout:rotator>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator
DESCRIPTION
ATTRIBUTES
alignItems
arrowVariant
autoRotateTime
direction
easing
height
id
minimapVariant
moveNextId
movePreviousId
positionStep
showAtOnce
showAtOnceMobile
spaceBetweenItems
speed
startAtRandom
transition
width
EXAMPLES
Basic Usage
Show Multiple Slides at Once
Specify Controls
layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<layout:rotator>` </...>

Transforms child elements into a rotating slider.

Related Tutorials

Content

any
Elements representing each slide of the Rotator.

Attributes

- `alignItems`
string
Align Items

Vertical alignment of rotator items where items are of different heights.
Follows CSS spec for Flex containers in the row direction.
- `arrowVariant`
string
Arrow Variant

Style navigation arrows
- `autoRotateTime`
int
Auto Rotate Time (Seconds)

The time the rotator spends on each item before automatically moving to the next in seconds. If set to 0, the rotator will not rotate automatically.
- `direction`
string
Auto Rotate Direction

When Auto Rotation is Enabled, this attribute determines the direction of rotation.

Possible values are forwards and backwards.
- `easing`
string
Transition Easing

The easing algorithm to apply to the rotation transition
Default = "fade", other possible values: "slide".
- `height`
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
- `id`
string
(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `minimapVariant`
string
Minimap Variant

Style variant of the Minimap below the rotator.
- `moveNextId`
string
MoveNextId

The ID of an element to use as a next button, which when clicked will advance the rotator by one position. Ensure the element exists and the id attribute is set.
- `movePreviousId`
string
MovePreviousId

The ID of an element to use as a previous button, which when clicked will move the rotator backwards by one position. Ensure the element exists and the id attribute is set.
- `positionStep`
string
Position Step

The number of positions to move each time next or previous is clicked.
- `showAtOnce`
int
Group Size

The number of elements to show at once. Default = 1.
- `showAtOnceMobile`
int
Mobile Group Size

The number of elements to show at once on mobile. Default = 1.
- `spaceBetweenItems`
int
Space Between Items (px)

The amount of space between slide items. Only applicable for a ShowAtOnce value greater than 1.
- `speed`
string
Transition Speed

The speed of the transition between slides.
Default = "normal", other possible values: "fast", "slow".
- `startAtRandom`
bool
Start At Random

If true the rotator will initialize showing a randomly selected item. If false, the first item in the rotator will always be initially visible.
- `transition`
string
Transition Animation

The animation effect when moving between two items in the rotator.
Default = "fade", other possible values: "slide".
- `width`
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.

Tutorials


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.

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

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
<div class="banner"> <layout:rotator id="featured_rotator2" movenextid="featured_rotator_next" movepreviousid="featured_rotator_previous" arrowVariant="none" minimapVariant="none"> <standard:image width="100%" height="500" maintainaspect="crop" src="https://images.unsplash.com/photo-1543575172-e1033f739205?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8NXx8YWJzdGFjdHxlbnwwfHx8fDE2MzE1MTQxMjQ&" /> <standard:image width="100%" height="500" maintainaspect="crop" src="https://images.unsplash.com/photo-1544438825-f1222acc39dc?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mjd8fGFic3RhY3QlMjBzbGlkZXxlbnwwfHx8fDE2MzE1MTQyMTg&" /> </layout:rotator> <!-- Buttons for changing between different slides --> <div class="rotatorNavigation"> <span class="leftArrow"> <a id="featured_rotator_previous" href="#"><standard:icon library="fontawesome" iconstyle="solid" iconname="chevron-left" size="4" style="width: 50px; height: 50px; color: #FFFFFF" /></a> </span> <span class="leftArrow"> <a id="featured_rotator_next" href="#"><standard:icon library="fontawesome" iconstyle="solid" iconname="chevron-right" size="4" style="width: 50px; height: 50px; color: #FFFFFF" /></a> </span> </div> </div> </templates:section>

Examples

Basic Usage

Each child node within the rotator control represents a single rotator slide.

HTML:

 <layout:rotator> <standard:image src="https://images.unsplash.com/photo-1498804103079-a6351b050096?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8N3x8Y29mZmVlfGVufDB8fHx8MTY4MDc1OTc4MA&" /> <standard:image src="https://images.unsplash.com/photo-1559925393-8be0ec4767c8?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Nnx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> <standard:image src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mnx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> <standard:image src="https://images.unsplash.com/photo-1529676468696-f3a47aba7d5d?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mjl8fGNhZmV8ZW58MHx8fHwxNjgwNzU5Nzk0&" /> <standard:image src="https://images.unsplash.com/photo-1481833761820-0509d3217039?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8NXx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> <standard:image src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8MXx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> </layout:rotator>

Run Example

Show Multiple Slides at Once

The 'ShowAtOnce' attribute can be used to view multiple slides. 'PositionStep' determines whether the rotator rotates one slide at a time, or transitions the whole group.

HTML:

 <layout:rotator ShowAtOnce="2" style="--rotator-control-outline-color: #ffffff; --rotator-control-background-color: #434656;" Transition="slide" PositionStep="single"> <templates:section fullheight="true" color="#ffffff" bgcolor="#2c2e3a"> <h1 style="text-align: center; font-size: 14vmin; line-height: 1em; mix-blend-mode: difference;">Slide One</h1> </templates:section> <templates:section fullheight="true" color="#ffffff" bgposition="center" contentsize="sm" bgcolor="#d9dee3"> <h1 style="text-align: center; font-size: 14vmin; line-height: 1em; mix-blend-mode: difference;">Slide Two</h1> </templates:section> <templates:section fullheight="true" color="#ffffff" bgcolor="#333333"> <h1 style="text-align: center; font-size: 14vmin; line-height: 1em; mix-blend-mode: difference; ">Slide Three</h1> </templates:section> </layout:rotator>

Run Example

Specify Controls

The 'MovePreviousId' and 'MoveNextId' attributes can be used to specify elements on the page which, when clicked, will rotate backwards and forwards.

HTML:

 <layout:rotator MovePreviousId="previous" MoveNextId="next"> <standard:image src="https://images.unsplash.com/photo-1498804103079-a6351b050096?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8N3x8Y29mZmVlfGVufDB8fHx8MTY4MDc1OTc4MA&" /> <standard:image src="https://images.unsplash.com/photo-1559925393-8be0ec4767c8?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Nnx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> <standard:image src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mnx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> </layout:rotator> <br /> <a id="previous" href="#">Previous</a> <a id="next" href="#">Next</a>

Run Example