<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
ATTRIBUTES
EXAMPLES
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

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