Getting Started
23 Nov 20163 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