Getting Started

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>
            </ul>
    
        </template>
    • Create rotator.js file inside src/samples/rotator folder with below code snippet.
  • javascript
  • 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-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