ejRotator

8 Aug 201724 minutes to read

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

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

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>

ejRotator

Syntax

Example

Requires

Members

allowKeyboardNavigation boolean

Default Value

Example

animationSpeed string|number

Default Value

Example

animationType string

Default Value

Example

circularMode boolean

Default Value

Example

cssClass string

Default Value

Example

dataSource Object

Default Value

Example

delay number

Default Value

Example

displayItemsCount string|number

Default Value

Example

enableAutoPlay boolean

Default Value

Example

enabled boolean

Default Value

Example

enableRTL boolean

Default Value

Example

fields object

Default Value

Example

fields.linkAttribute string

fields.targetAttribute string

fields.text string

fields.thumbnailText string

fields.thumbnailUrl string

fields.url string

frameSpace string|number

Default Value

Example

isResponsive boolean

Default Value

Example

navigateSteps string|number

Default Value

Example

orientation enum

Default Value

Example

pagerPosition string|enum

Default Value

Example

query string

Default Value

showCaption boolean

Default Value

Example

showNavigateButton boolean

Default Value

Example

showPager boolean

Default Value

Example

showPlayButton boolean

Default Value

Example

showThumbnail boolean

Default Value

Example

slideHeight string|number

allowKeyboardNavigation `boolean`

animationSpeed `string|number`

animationType `string`

circularMode `boolean`

cssClass `string`

dataSource `Object`

delay `number`

displayItemsCount `string|number`

enableAutoPlay `boolean`

enabled `boolean`

enableRTL `boolean`

fields `object`

fields.linkAttribute `string`

fields.targetAttribute `string`

fields.text `string`

fields.thumbnailText `string`

fields.thumbnailUrl `string`

fields.url `string`

frameSpace `string|number`

isResponsive `boolean`

navigateSteps `string|number`

orientation `enum`

pagerPosition `string|enum`

query `string`

showCaption `boolean`

showNavigateButton `boolean`

showPager `boolean`

showPlayButton `boolean`

showThumbnail `boolean`

slideHeight `string|number`

slideWidth `string|number`

startIndex `string|number`

stopOnHover `boolean`

template `string`

templateId `Array`

thumbnailSourceID `Object`