ejRotator

The Rotator control displays a set of slides. Each slide may contain images or images with content, or content with user-defined transition between them.

Syntax

  • javascript
  • $(element).ejRotator()

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //Initialize the Rotator control in the script as follows.
    $(function (){
    // document ready
    // simple Rotator creation
    $("#sliderContent").ejRotator();
    });
    </script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.rotator.js

    Members

    allowKeyboardNavigation boolean

    Turns on keyboard interaction with the Rotator items. You must set this property to true to access the following keyboard shortcuts:

    Default Value

    • true

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the allowKeyboardNavigation during initialization.                       
            $("#sliderContent").ejRotator({ allowKeyboardNavigation : false});              
    </script>

    animationSpeed string|number

    Sets the animationSpeed of slide transition.

    Default Value

    • 600

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the animationSpeed during initialization.                        
            $("#sliderContent").ejRotator({ animationSpeed : 600});                 
    </script>

    animationType string

    Specifies the animationType type for the Rotator Item. animationType options include slide, fastSlide, slowSlide, and other custom easing animationTypes.

    Default Value

    • “slide”

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the animationType during initialization.                         
            $("#sliderContent").ejRotator({ animationType : "slide" });                     
    </script>

    circularMode boolean

    Enables the circular mode item rotation.

    Default Value

    • true

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the circularMode during initialization.                  
            $("#sliderContent").ejRotator({ circularMode : false});         
    </script>

    cssClass string

    Specify the CSS class to Rotator to achieve custom theme.

    Default Value

    • ””

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the CSS class during initialization.                     
            $("#sliderContent").ejRotator({  cssClass : "gradient-lime" });                 
    </script>

    dataSource Object

    Specify the list of data which contains a set of data fields. Each data value is used to render an item for the Rotator.

    Default Value

    • null

    Example

  • html
  • <ul id="sliderContent">
    </ul>
    <script>
    // Set the dataSource during initialization.                    
            $("#sliderContent").ejRotator({ dataSource:window.items });                     
    </script>

    delay number

    Sets the delay between the Rotator Items move after the slide transition.

    Default Value

    • 500

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the animationSpeed during initialization.      
      $("#sliderContent").ejRotator({ delay : 600});     
    </script>

    displayItemsCount string|number

    Specifies the number of Rotator Items to be displayed.

    Default Value

    • “1”

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the displayItemsCount  during initialization.                    
            $("#sliderContent").ejRotator({ displayItemsCount  : "1"});                     
    </script>

    enableAutoPlay boolean

    Rotates the Rotator Items continuously without user interference.

    Default Value

    • false

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the enableAutoPlay during initialization.                        
            $("#sliderContent").ejRotator({ enableAutoPlay:true});           
    </script>

    enabled boolean

    Enables or disables the Rotator control.

    Default Value

    • true

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the enabled during initialization.                       
            $("#sliderContent").ejRotator({  enabled : true});               
    </script>

    enableRTL boolean

    Specifies right to left transition of slides.

    Default Value

    • false

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the enableRTL during initialization.                     
            $("#sliderContent").ejRotator({ enableRTL : false});                    
    </script>

    fields object

    Defines mapping fields for the data items of the Rotator.

    Default Value

    • null

    Example

  • html
  • <ul id="sliderContent">
    </ul>
    <script>
    // Set the fields during initialization.                        
            $("#sliderContent").ejRotator({ dataSource:window.items, fields: {text:"text",url:"url",linkAttribute:"http://www.google.com",targetAttribute:"blank"}});
    </script>

    fields.linkAttribute string

    Specifies a link for the image.

    fields.targetAttribute string

    Specifies where to open a given link.

    fields.text string

    Specifies a caption for the image.

    fields.thumbnailText string

    Specifies a caption for the thumbnail image.

    fields.thumbnailUrl string

    Specifies the URL for an thumbnail image.

    fields.url string

    Specifies the URL for an image.

    frameSpace string|number

    Sets the space between the Rotator Items.

    Default Value

    • ””

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the frameSpace during initialization.                    
            $("#sliderContent").ejRotator({ slideWidth:"600px",slideHeight:"400px",displayItemsCount:2, frameSpace:"10px"});                        
    </script>

    isResponsive boolean

    Resizes the Rotator when the browser is resized.

    Default Value

    • false

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the isResponsive during initialization.                  
            $("#sliderContent").ejRotator({ isResponsive : false});                 
    </script>

    navigateSteps string|number

    Specifies the number of Rotator Items to navigate on a single click (next/previous/play buttons). The navigateSteps property value must be less than or equal to the displayItemsCount property value.

    Default Value

    • “1”

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the navigateSteps during initialization.                         
            $("#sliderContent").ejRotator({ navigateSteps : "1"});           
    </script>

    orientation enum

    Specifies the orientation for the Rotator control, that is, whether it must be rendered horizontally or vertically. See Orientation

    Name Type Default Description
    Horizontal string horizontal Used to set Orientation as Horizontal
    Vertical string vertical Used to set Orientation as Vertical

    Default Value

    • ej.Orientation.Horizontal

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the orientation during initialization.                   
            $("#sliderContent").ejRotator({ orientation : ej.Orientation.Horizontal });                     
    </script>

    pagerPosition string|enum

    Specifies the position of the showPager in the Rotator Item. See PagerPosition

    Name Type Default Description
    BottomLeft string bottomleft Used to set PagerPosition as BottomLeft
    BottomRight string bottomright Used to set PagerPosition as BottomRight
    Outside string outside Used to set PagerPosition as Outside
    TopCenter string topcenter Used to set PagerPosition as TopCenter
    TopLeft string topleft Used to set PagerPosition as TopLeft
    TopRight string topright Used to set PagerPosition as TopRight

    Default Value

    • “outside”

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the pagerPosition during initialization.                         
            $("#sliderContent").ejRotator({ pagerPosition :"outside" });                    
    </script>

    query string

    Retrieves data from remote data. This property is applicable only when a remote data source is used.

    Default Value

    • null

    showCaption boolean

    If the Rotator Item is an image, you can specify a caption for the Rotator Item. The caption text for each Rotator Item must be set by using the title attribute of the respective tag. The caption cannot be displayed if multiple Rotator Items are present.

    Default Value

    • false

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" title="Nature" /></li>
    <li><img src="../images/rotator/bird.jpg" title="Bird" /></li>
    <li><img src="../images/rotator/sculpture.jpg" title="Sculpture" /></li>
    <li><img src="../images/rotator/seaview.jpg" title="Seaview"  /></li>
    <li><img src="../images/rotator/snowfall.jpg" title="Snowfall" /></li>
    </ul>
    <script>
    // Set the caption during initialization.                       
            $("#sliderContent").ejRotator({showCaption:true});                      
    </script>

    showNavigateButton boolean

    Turns on or off the slide buttons (next and previous) in the Rotator Items. Slide buttons are used to navigate the Rotator Items.

    Default Value

    • true

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the showNavigateButton during initialization.                    
            $("#sliderContent").ejRotator({ showNavigateButton : false});                   
    </script>

    showPager boolean

    Turns on or off the pager support in the Rotator control. The Pager is used to navigate the Rotator Items.

    Default Value

    • true

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the pager during initialization.                         
            $("#sliderContent").ejRotator({ showPager : false});                    
    </script>

    showPlayButton boolean

    Enable play / pause button on rotator.

    Default Value

    • false

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the showPlayButton during initialization.                        
            $("#sliderContent").ejRotator({ showPlayButton:true});                  
    </script>

    showThumbnail boolean

    Turns on or off thumbnail support in the Rotator control. Thumbnail is used to navigate between slides. Thumbnail supports only single slide transition You must specify the source for thumbnail elements through the thumbnailSourceID property.

    Default Value

    • false

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <!-- Thumbnail Source -->
    <ul id="thumbElement">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the showThumbnail during initialization.                         
            $("#sliderContent").ejRotator({ showThumbnail:true, thumbnailSourceID :"thumbElement"});                        
    </script>

    slideHeight string|number

    Sets the height of a Rotator Item.

    Default Value

    • ””

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the slideHeight during initialization.                   
            $("#sliderContent").ejRotator({ slideHeight : "600px"});                        
    </script>

    slideWidth string|number

    Sets the width of a Rotator Item.

    Default Value

    • ””

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the slideWidth during initialization.                    
            $("#sliderContent").ejRotator({ slideWidth : "600px"});                 
    </script>

    startIndex string|number

    Sets the index of the slide that must be displayed first.

    Default Value

    • “0”

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the startIndex during initialization.                    
            $("#sliderContent").ejRotator({ startIndex : "1"});                     
    </script>

    stopOnHover boolean

    Pause the auto play while hover on the rotator content.

    Default Value

    • false

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the stopOnHover during initialization.                   
            $("#sliderContent").ejRotator({ enableAutoPlay:true, stopOnHover:true});                        
    </script>

    template string

    The template to display the Rotator widget with customized appearance.

    Default Value:

    • null

    Example

  • html
  • <ul id="sliderContent">                        
            </ul>
    
            <script>
               var themesList = [
                    { text: "Colorful-Night", url: "../content/images/rotator/snowfall.jpg" },
                    { text: "Technology", url: "../content/images/rotator/tablet.jpg" },
                    { text: "Nature", url: "../content/images/rotator/nature.jpg" },
                    { text: "Snow Fall", url: "../content/images/rotator/snowfall.jpg" },
                    { text: "Credit Card", url: "../content/images/rotator/card.jpg" },
                    { text: "Beautiful Bird", url: "../content/images/rotator/bird.jpg" },
                    { text: "Amazing Sculptures", url: "../content/images/rotator/sculpture.jpg" }				
                    ];
    
                $("#sliderContent").ejRotator({
    		dataSource: themesList,
                    slideWidth: "100%",
                    frameSpace: "0px",
    		slideHeight: "auto",
    		template: '<div class="image"><img src = ${url} title = ${text} class="image"/> </div>' 				
                });        
            </script>

    templateId Array

    The templateId enables to bind multiple customized template items in Rotator.

    Default Value:

    • null

    Example

  • html
  • <ul id="sliderContent">                        
            </ul>
            <script id="template1" type="text/x-jsrender">
                    <div id="t1" >
                    <img class="image" src="../content/images/rotator/sea.jpg" title="Snowfall" />
                    </div>
            </script>
            <script id="template2" type="text/x-jsrender">
                    <div id="t2">
                            <video width="472" height="350" controls style="margin-left: -2px;">
                            <source src="video.mp4" type="video/mp4">
                            </video>
                    </div>
            </script>
            <script>
    
                $("#sliderContent").ejRotator({
                    slideWidth: "300%",
                    frameSpace: "0px",
    		slideHeight: "100px",
    		templateId: ["template1","template2"] 				
                });        
            </script>

    thumbnailSourceID Object

    Specifies the source for thumbnail elements.

    Default Value

    • null

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <ul id="thumbElement">
    <li><img src="../images/rotator/nature.jpg"/></li>
    <li><img src="../images/rotator/bird.jpg" /></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg"/></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    // Set the thumbnailSourceID during initialization.                     
            $("#sliderContent").ejRotator({ showThumbnail:true, thumbnailSourceID :"thumbElement"});                         
    </script>

    Methods

    disable()

    Disables the Rotator control.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //initialize the Rotator object
    $("#sliderContent").ejRotator();
            var slideObj = $("#sliderContent").data("ejRotator");
            //To Disables the Rotator control.
            slideObj.disable();
    </script>
  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator();
    //To Disables the Rotator control.
     $("#sliderContent").ejRotator("disable");
    </script>

    enable()

    Enables the Rotator control.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //initialize the Rotator object
    $("#sliderContent").ejRotator();
            var slideObj = $("#sliderContent").data("ejRotator");
            //To Enables the Rotator control.
            slideObj.enable();
    </script>
  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator();
    $("#sliderContent").ejRotator("enable");
    </script>

    getIndex()

    This method is used to get the current slide index.

    Returns:

    number

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //initialize the Rotator object
    $("#sliderContent").ejRotator();
            var slideObj = $("#sliderContent").data("ejRotator");
            // Gets the index value of the current slide.
            slideObj.getIndex();
    </script>
  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator();
            // Gets the index value of the current slide.
     $("#sliderContent").ejRotator("getIndex");
    </script>

    gotoIndex(index)

    This method is used to move a slide to the specified index.

    Name Type Description
  • html
  • index
    number index of an slide

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //initialize the Rotator object
    $("#sliderContent").ejRotator();
            var slideObj = $("#sliderContent").data("ejRotator");
            // Moves the slide to the specified index.
            slideObj.gotoIndex(3);
     </script>
  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator();
            // Moves the slide to the specified index.
     $("#sliderContent").ejRotator("gotoIndex",3);
    </script>

    pause()

    This method is used to pause autoplay.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //initialize the Rotator object
    $("#sliderContent").ejRotator();
            var slideObj = $("#sliderContent").data("ejRotator");
            //To Pauses auto play.
            slideObj.pause();       
    </script>
  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator();
            //To Pause auto play.
     $("#sliderContent").ejRotator("pause");
    </script>

    play()

    This method is used to move slides continuously (or start autoplay) in the specified autoplay direction.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //initialize the Rotator object
    $("#sliderContent").ejRotator();
            var slideObj = $("#sliderContent").data("ejRotator");
            //To Starts auto play.
            slideObj.play();
    </script>
  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator();
            //To Starts auto play.
     $("#sliderContent").ejRotator("play");
    </script>

    slideNext()

    This method is used to move to the next slide from the current slide. If the current slide is the last slide, then the first slide will be treated as the next slide.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //initialize the Rotator object
    $("#sliderContent").ejRotator();
            var slideObj = $("#sliderContent").data("ejRotator");
            //Moves to the next slide.
            slideObj.slideNext();
    </script>
  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator();
    //Moves to the next slide.
     $("#sliderContent").ejRotator("slideNext");
    </script>

    slidePrevious()

    This method is used to move to the previous slide from the current slide. If the current slide is the first slide, then the last slide will be treated as the previous slide.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //initialize the Rotator object
    $("#sliderContent").ejRotator();
            var slideObj = $("#sliderContent").data("ejRotator");
            //Moves to the previous slide.
            slideObj.slidePrevious();
    </script>
  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator();
    //Moves to the previous slide.
     $("#sliderContent").ejRotator("slidePrevious");
    </script>

    updateTemplateById(id, index)

    This method is used to update/modify the slide content of template rotator by using id based on index value.

    Name Type Description
    index number index of an slide
    id string id of a new updated slide

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    //initialize the Rotator object
    $("#sliderContent").ejRotator();
            var slideObj = $("#sliderContent").data("ejRotator");
            //Moves to the previous slide.
            slideObj.updateTemplateById("newId",2);
    </script>
  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator();
    //Moves to the previous slide.
     $("#sliderContent").ejRotator("updateTemplateById",'newId', 2);
    </script>

    Events

    change

    This event is fired when the Rotator slides are changed.

    Name Type Description
    argument Object Event parameters from rotator
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the rotator model
    type string returns the name of the event
    itemId string the current rotator id.
    activeItemIndex number returns the current slide index.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator({
       change: function (args) {}
    }); 
    </script>

    create

    This event is fired when the Rotator control is initialized.

    Name Type Description
    argument Object Event parameters from rotator
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the rotator model
    type string returns the name of the event

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator({
       create: function (args) {}
    });   
    </script>

    destroy

    This event is fired when the Rotator control is destroyed.

    Name Type Description
    argument Object Event parameters from rotator
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the rotator model
    type string returns the name of the event

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator({
       destroy: function (args) {}
    });   
    </script>

    pagerClick

    This event is fired when a pager is clicked.

    Name Type Description
    argument Object Event parameters from rotator
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the rotator model
    type string returns the name of the event
    itemId string the current rotator id.
    activeItemIndex number returns the current slide index.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator({
       pagerClick: function (args) {}
    }); 
    </script>

    start

    This event is fired when enableAutoPlay is started.

    Name Type Description
    argument Object Event parameters from rotator
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the rotator model
    type string returns the name of the event
    itemId string the current rotator id.
    activeItemIndex number returns the current slide index.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator({
       start: function (args) {}
    });
    </script>

    stop

    This event is fired when autoplay is stopped or paused.

    Name Type Description
    argument Object Event parameters from rotator
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the rotator model
    type string returns the name of the event
    itemId string the current rotator id.
    activeItemIndex number returns the current slide index.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator({
       stop: function (args) {}
    });    
    </script>

    thumbItemClick

    This event is fired when a thumbnail pager is clicked.

    Name Type Description
    argument Object Event parameters from rotator
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the rotator model
    type string returns the name of the event
    itemId string the current rotator id.
    activeItemIndex number returns the current slide index.

    Example

  • html
  • <ul id="sliderContent">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <ul id="thumbElement">
    <li><img src="../images/rotator/nature.jpg" /></li>
    <li><img src="../images/rotator/bird.jpg"/></li>
    <li><img src="../images/rotator/sculpture.jpg"/></li>
    <li><img src="../images/rotator/seaview.jpg" /></li>
    <li><img src="../images/rotator/snowfall.jpg"/></li>
    </ul>
    <script>
    $("#sliderContent").ejRotator({
       showThumbnail:true,
       thumbnailSourceID:"thumbElement",
       thumbItemClick: function (args) {}
    });   
    </script>