Getting Started
23 Nov 2016 / 3 minutes to read
This section helps to get started of the Rotator component for Aurelia.
Create a Rotator Component
- To create Syncfusion Aurelia application refer Aurelia Getting Started Documentation.
- Create
rotator
folder insidesrc/samples
location. - Create
rotator.html
file insidesrc/samples/rotator
folder and use the below code for rendering Rotator component.
<template>
<ul id="sliderContent" ej-rotator="e-slide-width.bind:slideWidth>
</ul>
</template>
- Create
rotator.js
file insidesrc/samples/rotator
folder with below code snippet.
export class BasicUse {
constructor() {
this.slideWidth = '100%';
this.frameSpace = '0px';
this.slideHeight = 'auto';
this.position = ej.Rotator.PagerPosition.TopLeft;
this.orientation = ej.Orientation.Horizontal;
}
}
Configure data
To configure images for Rotator component, define URL and title for images as given below.
<ul id="sliderContent" ej-rotator="e-slide-width.bind:slideWidth;
e-frame-space.bind:frameSpace;
e-pager-position:position;
e-slide-height.bind: slideHeight;
e-show-caption: true;
e-show-play-button: true;
e-is-responsive:true;">
<li>
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/seaview.jpg" title="Sea-View" /></li>
<li>
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/snowfall.jpg" title="Snow Fall" /></li>
<li>
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/tablet.jpg" title="Tablet" /></li>
<li>
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/nature.jpg" title="Nature" /></li>
<li>
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/card.jpg" title="Credit Card" /></li>
<li>
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/bird.jpg" title="Beautiful Bird" /></li>
<li>
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/wheat.jpg" title="Wheat”/></li>
<li>
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/night.jpg" title="Colorful Night" /></li>
</ul>
Note: You can find the Rotator properties from the API reference document
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page