Behavior settings

Enabling rotator

The enabled property enables or disables the Rotator component. The default value is ‘true’. The value set to this property is Boolean type. You can refer the following code example to set this property.

  • html
  • <ul ej-rotator id="sliderContent" [dataSource]="data" [fields]="fieldList" [showPlayButton]="true" [enabled]="true" slideWidth="400px" slideHeight="300px">
                            </ul>

    Device Responsiveness

    The isResponsive property resizes the Rotator when the browser window is resized. The default value is ‘false’. The value set to this property is Boolean.

  • html
  • <ul ej-rotator id="sliderContent" [dataSource]="data" [fields]="fieldList" [showPlayButton]="true" [isResponsive]="true" slideWidth="400px" slideHeight="300px">
                            </ul>

    Auto Play option

    By using the enableAutoPlay, we can able to play the rotator slides automatically without our interference when it is set as true. The default value is ‘false’. The value set to this property is Boolean.

  • html
  • <ul ej-rotator id="sliderContent" [dataSource]="data" [fields]="fieldList" [showPlayButton]="true" [enableAutoPlay]="true" slideWidth="400px" slideHeight="300px">
                            </ul>

    Stop sliding on hover

    The stopOnHover property pauses the auto play while mouse over the Rotator content. The default value is ‘false’. The value set to this property is Boolean.

  • html
  • <ul ej-rotator id="sliderContent" [dataSource]="data" [fields]="fieldList" [showPlayButton]="true" [enableAutoPlay]="true" [stopOnHover]="true" slideWidth="400px" slideHeight="300px">
                            </ul>

    Pager settings

    Show pager

    The showPager property turns on or off the pager support in the Rotator component. The Pager is used to navigate the Rotator Items. The default value is ‘true’. The value set to this property is Boolean.

  • html
  • <ul ej-rotator id="sliderContent" [dataSource]="data" [fields]="fieldList" [showPlayButton="true" [showPager]="true" slideWidth="400px" slideHeight="300px">
                            </ul>

    Pager position

    This property specifies the position of the Pager in the Rotator Item. The default value is ‘outside’. The value set to this property is string or enum.

    ej.Rotator.PagerPosition.BottomLeft

    ej.Rotator.PagerPosition.BottomRight

    ej.Rotator.PagerPosition.Outside

    ej.Rotator.PagerPosition.TopCenter

    ej.Rotator.PagerPosition.TopLeft

    ej.Rotator.PagerPosition.TopRight

  • html
  • <ul ej-rotator id="sliderContent" [dataSource]="data" [fields]="fieldList" [showPlayButton]="true" [pagerPosition]="position" [enabled]="true" slideWidth="400px" slideHeight="300px"> </ul>
  • js
  • export class AppComponent {
        data: Array<any>;
        fieldList: Object;
        position :any;
        constructor() {
            this.data = [
            { text: "Snowfall", url: " http://js.syncfusion.com/demos/web/content/images/rotator/snowfall.jpg" },
              { text: "Green", url: " http://js.syncfusion.com/demos/web/content/images/rotator/green.jpg" },
              { text: "Beatutiful Bird", url: " http://js.syncfusion.com/demos/web/content/images/rotator/bird.jpg" },
              { text: "Tablet", url: " http://js.syncfusion.com/demos/web/content/images/rotator/tablet.jpg" },
              { text: "Nature", url: " http://js.syncfusion.com/demos/web/content/images/rotator/nature.jpg" }
    
            ];
            this.fieldList = { dataSource: this.data, text: 'text', url: 'url' };
            this.position = ej.Rotator.PagerPosition.BottomLeft;
        }
        }