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 inside src/samples location.
  • Create rotator.html file inside src/samples/rotator folder and use the below code for rendering Rotator component.
  • HTML
  • <template>
            <ul id="sliderContent" ej-rotator="e-slide-width.bind:slideWidth>
    • Create rotator.js file inside src/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.

  • HTML
  • <ul id="sliderContent" ej-rotator="e-slide-width.bind:slideWidth; 
            e-slide-height.bind: slideHeight;
            e-show-caption: true;
            e-show-play-button: true;
                    <img class="image" src="" title="Sea-View" /></li>
                    <img class="image" src="" title="Snow Fall" /></li>
                    <img class="image" src="" title="Tablet" /></li>
                    <img class="image" src="" title="Nature" /></li>
                    <img class="image" src="" title="Credit Card" /></li>
                    <img class="image" src="" title="Beautiful Bird" /></li>
                    <img class="image" src="" title="Wheat”/></li>
                    <img class="image" src="" title="Colorful Night" /></li>

    Note: You can find the Rotator properties from the API reference document