Behavior settings

Enabling rotator

The “enabled” property enables or disables the Rotator control. 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
  • <div class="cols-sample-area">
       <ul id="sliderContent" accesskey="e">
          <li>
             <img class="image" src="../images/rotator/nature.jpg" title="Nature" />
          </li>
          <li>
             <img class="image" src="../images/rotator/bird.jpg" title="Beautiful Bird" />
          </li>
          <li>
             <img class="image" src="../images/rotator/sculpture.jpg" title="Amazing Sculptures" />
          </li>
          <li>
             <img class="image" src="../images/rotator/seaview.jpg" title="Sea-View" />
          </li>
          <li>
             <img class="image" src="../images/rotator/snowfall.jpg" title="Snow Fall" />
          </li>
          <li>
             <img class="image" src="../images/rotator/card.jpg" title="Credit Card" />
          </li>
          <li>
             <img class="image" src="../images/rotator/night.jpg" title="Colorful Night" />
          </li>
       </ul>
    </div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />\
    
    module RotatorComponent {
        $(function () {
            var rotatorInstance = new ej.Rotator($("#sliderContent"), {
                 enabled: true
                  });
        });
    }

    Responsive rotator

    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.

  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />\
    
    module RotatorComponent {
        $(function () {
            var rotatorInstance = new ej.Rotator($("#sliderContent"), {
                 isResponsive : true 
            });
        });
    }

    Auto Play

    The Rotator Items continuously rotate without user interference by enable the enableAutoPlay property. The default value is ‘false’. The value set to this property is Boolean.

  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />\
    
    module RotatorComponent {
        $(function () {
            var rotatorInstance = new ej.Rotator($("#sliderContent"), {
                enableAutoPlay: true 
            });
        });
    }

    Stop on hover

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

  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />\
    
    module RotatorComponent {
        $(function () {
            var rotatorInstance = new ej.Rotator($("#sliderContent"), {
                 enableAutoPlay: true,
                  stopOnHover: true
             });
        });
    }

    Pager settings

    Pager position

    This property specifies the position of the showPager 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
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />\
    
    module RotatorComponent {
        $(function () {
            var rotatorInstance = new ej.Rotator($("#sliderContent"), {
                pagerPosition: ej.Rotator.PagerPosition.BottomLeft,
                slideWidth: "630px",
                slideHeight: "350px"
            });
        });
    }

    Show pager

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

  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />\
    
    module RotatorComponent {
        $(function () {
            var rotatorInstance = new ej.Rotator($("#sliderContent"), {
                showPager: false
             });
        });
    }

    Show options

    Show play button

    The “showPlayButton” property enables play / pause button on Rotator. The default value is ‘false’. The value set to this property is Boolean.

  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />\
    
    module RotatorComponent {
        $(function () {
            var rotatorInstance = new ej.Rotator($("#sliderContent"), {
                 slideWidth: "600px", 
                 showPlayButton: true 
             });
        });
    }

    Show navigate button

    The “showNavigateButton” property turns on or off the slide buttons (next and previous) in the Rotator Items. Slide buttons are used to navigate the Rotator Items. The default value is ‘false’. The value set to this property is Boolean.

  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module RotatorComponent {
        $(function () {
            var rotatorInstance = new ej.Rotator($("#sliderContent"), {
                slideWidth: "500px", 
                showNavigateButton: true 
            });
        });
    }

    Show caption

    When the Rotator Item is an image, you can specify a caption for the Rotator Item. The caption text for each Rotator Item is set by using the title attribute of the respective <image> tag. The caption cannot be displayed when multiple Rotator Items are present. The default value is ‘false’. The value set to this property is Boolean.

  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />\
    
    module RotatorComponent {
        $(function () {
            var rotatorInstance = new ej.Rotator($("#sliderContent"), {
                slideWidth: "500px", 
                showCaption: true
             });
        });
    }