ejmRotator

5 Jun 202324 minutes to read

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

Custom Design for Html Rotator control.

$(element).ejmRotator();

####Example

HTML

<!-- Unobtrusive way of rendering -->
 
 <div id="rotatorcontent">
        <div data-ej-imageurl="bird.jpg">
        </div>
        <div data-ej-imageurl="wheat.jpg">
        </div>
        <div data-ej-imageurl="card.jpg">
        </div>
        <div data-ej-imageurl="rose.jpg">
        </div>
        <div data-ej-imageurl="snowfall.jpg">
        </div>
        <div data-ej-imageurl="bird.jpg">
        </div>
    </div>
    <div id="rotator" data-role="ejmrotator" data-ej-targetid="rotatorcontent">
    </div>

HTML

<!-- Obtrusive way of rendering -->
     <div id="rotatorcontent">
        <div data-ej-imageurl="bird.jpg">
        </div>
        <div data-ej-imageurl="wheat.jpg">
        </div>
        <div data-ej-imageurl="card.jpg">
        </div>
        <div data-ej-imageurl="rose.jpg">
        </div>
        <div data-ej-imageurl="snowfall.jpg">
        </div>
        <div data-ej-imageurl="bird.jpg">
        </div>
    </div>
    <div id="rotator">
    </div>
    <script>
        $(function(){
            $("#rotator").ejmRotator({ targetId: "rotatorcontent" });
        })
    </script>

Requires

module:jQuery
module:ej.core
module:ej.unobtrusive
module:ej.mobile.core
module:ej.data
module:ej.touch

Members

currentItemIndex `Int`

Specifies the currentItemIndex for select the particular item based on the specified index.

Default Value:

Example

HTML

<!-- Unobtrusive way of rendering -->

 <div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent" data-ej-currentitemindex="2">

    </div>

HTML

<!-- Obtrusive way of rendering -->

<div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotator">

    </div>

    <script>

        $(function () {

                       //To set currentItemIndex API value

            $("#rotator").ejmRotator({ targetId: "rotatorcontent", currentItemIndex: 2 });

        })

    </script>

dataSource

Specifies the data source for Rotator rendering. In Rotator , options can be given as data source of JSON array.

Default Value:

null

Example

HTML

<!-- Unobtrusive way of rendering -->
<style>
    .image-bird
    {
        background-image: url("bird.jpg");
    }
        
    .image-wheat
    {
        background-image: url("wheat.jpg");
    }
        
    .image-card
    {
        background-image: url("card.jpg");
    }
        
    .image-rose
    {
        background-image: url("rose.jpg");
    }
        
    .image-snowfall
    {
        background-image: url("snowfall.jpg");
    }
</style>
<script type="text/javascript">

    window.dataSource = [{ imageUrl: 'image-bird' }, { imageUrl: 'image-wheat' }, { imageUrl: 'image-card' }, { imageUrl: 'image-rose' }, { imageUrl: 'image-snowfall'}];

</script>
<div id="rotatorcontent">
    <div class="e-m-rotator-image ">
    </div>
</div>
<div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent"
    data-ej-datasource="window.dataSource">
</div>

HTML

<style>
    .image-bird
    {
        background-image: url("bird.jpg");
    }
        
    .image-wheat
    {
        background-image: url("wheat.jpg");
    }
        
    .image-card
    {
        background-image: url("card.jpg");
    }
        
    .image-rose
    {
        background-image: url("rose.jpg");
    }
        
    .image-snowfall
    {
        background-image: url("snowfall.jpg");
    }
</style>
<div id="rotatorcontent">
    <div class="e-m-rotator-image ">
    </div>
</div>
<div id="rotator">
</div>
<script>

    $(function () {

        //To set dataSource API value

        $("#rotator").ejmRotator({ targetId: "rotatorcontent", dataSource: [{ imageUrl: 'image-bird' }, { imageUrl: 'image-wheat' }, { imageUrl: 'image-card' }, { imageUrl: 'image-rose' }, { imageUrl: 'image-snowfall'}] });

    })

</script>

cssClass `String`

Specify the CSS class to Rotator to achieve custom theme.

Default Value:

*“ ”

Example

HTML

<!-- Unobtrusive way of rendering -->
<style>
    .customize-rotator .e-m-rotator-image
    {
        background-size: 200px 200px;
    }
</style>
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotator" data-role="ejmrotator" data-ej-targetid="rotatorcontent" data-ej-cssclass="customize-rotator">
</div>

HTML

<!-- Obtrusive way of rendering -->
<style>
    .customize-rotator .e-m-rotator-image
    {
        background-size: 200px 200px;
    }
</style>
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotator">
</div>
<script>

    $(function () {

        //To set cssClass API value

        $("#rotator").ejmRotator({ targetId: "rotatorcontent", cssClass: "customize-rotator" });

    })

</script>

enablePersistence `Boolean`

Current model value to browser cookies for state maintains. While refresh the Rotator control page retains the model value apply from browser cookies.

Default Value:

false

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent"
    data-ej-enablepersistence="true">
</div>

HTML

<!-- Obtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotator">
</div>
<script>

    $(function () {

        //To set enablePersistence API value

        $("#rotator").ejmRotator({ targetId: "rotatorcontent", enablePersistence: true });

    })
</script>

items `Array`

Specifies the Rotator items as an array of JSON objects.

Default Value:

null

Example

HTML

<!-- Unobtrusive way of rendering -->

    <div id="rotatordefault" data-role="ejmrotator"  data-ej-items="[{imageUrl:'bird.jpg'},{imageUrl:'wheat.jpg'},{imageUrl:'card.jpg'},{imageUrl:'rose.jpg'},{imageUrl:'snowfall.jpg'}]">

    </div>

HTML

<!-- Obtrusive way of rendering -->


<div id="rotator">

    </div>

    <script>

        $(function () {

                       //To set items API value

            $("#rotator").ejmRotator({ items: [{ imageUrl: 'bird.jpg' }, { imageUrl: 'wheat.jpg' }, { imageUrl: 'card.jpg' }, { imageUrl: 'rose.jpg' }, { imageUrl: 'snowfall.jpg' }] });

        })

    </script>

orientation `Enum`

Specifies the rotator orientation to the horizontal or vertical. See below to know available orientation options.

Name	Description
Horizontal	To swipe the rotator content images in horizontal
Vertical	To swipe the rotator content images in vertical

Default Value:

“horizontal”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent"
    data-ej-orientation="vertical">
</div>

HTML

<!-- Obtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotator">
</div>
<script>

    $(function () {

        //To set orientation API value

        $("#rotator").ejmRotator({ targetId: "rotatorcontent", orientation: "vertical" });

    })

</script>

pagerPosition `Enum`

Specifies the pager position relevant to orientation. See the below to know available pagerPosition options.

Name	Description
Top	To display the pager position on top side.
Bottom	To display the pager position on bottom side.
Left	To display the pager position on left side.
Right	To display the pager position on right side.

Default Value:

“bottom”

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    s
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent"
    data-ej-pagerposition="top">
</div>

HTML

<!-- Obtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotator">
</div>
<script>

    $(function () {

        //To set pagerPosition API value

        $("#rotator").ejmRotator({ targetId: "rotatorcontent", pagerPosition: "top" });

    })

</script>

showPager `Boolean`

Specifies whether to show the Pager on initialization.

Default Value:

true

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent"
    data-ej-showpager="false">
</div>

HTML

<!-- Obtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotator">
</div>
<script>

    $(function () {

        //To set showPager API value

        $("#rotator").ejmRotator({ targetId: "rotatorcontent", showPager: false });

    })

</script>

renderMode `Enum`

Specifies the rendering mode of the Rotator control. SeeRenderMode

Name	Type	Default	Description
Auto	string	auto	Auto RenderMode
IOS7	string	ios7	IOS7 RenderMode
Android	string	android	Android RenderMode
Windows	string	windows	Windows RenderMode

Default Value:

auto

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent"
    data-ej-rendermode="android">
</div>

HTML

<!-- Obtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotator">
</div>
<script>

    $(function () {

        //To set renderMode API value

        $("#rotator").ejmRotator({ targetId: "rotatorcontent", renderMode: "android" });

    })

</script>

targetHeight `String`

Specifies the targetHeight on initialization of the Rotator control.

Default Value:

auto

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent"
    data-ej-targetheight="300px">
</div>

HTML

<!-- Obtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotator">
</div>
<script>

    $(function () {

        //To set targetHeight API value

        $("#rotator").ejmRotator({ targetId: "rotatorcontent", targetHeight: "300px" });

    })

</script>

targetId `String`

Specifies the targetId to the content of the Rotator control.

Default Value:

null

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent">
</div>

HTML

<!-- Obtrusive way of rendering -->
<div id="rotatorcontent">
    <div data-ej-imageurl="bird.jpg">
    </div>
    <div data-ej-imageurl="wheat.jpg">
    </div>
    <div data-ej-imageurl="card.jpg">
    </div>
    <div data-ej-imageurl="rose.jpg">
    </div>
    <div data-ej-imageurl="snowfall.jpg">
    </div>
    <div data-ej-imageurl="bird.jpg">
    </div>
</div>
<div id="rotator">
</div>
<script>

    $(function () {

        //To set targetId API value

        $("#rotator").ejmRotator({ targetId: "rotatorcontent" });

    })

</script>

targetWidth `String`

Specifies the targetWidth on initialization of the Rotator control.

Default Value:

auto

Example

HTML

<!-- Unobtrusive way of rendering -->   

 <div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>s

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent" data-ej-targetwidth="300px">

    </div>

HTML

<!-- Obtrusive way of rendering -->

<div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotator">

    </div>

    <script>

        $(function () {

                   //To set targetWidth API value

            $("#rotator").ejmRotator({ targetId: "rotatorcontent", targetWidth: "300px" });

        })

    </script>

Methods

renderDatasource()

To handle the rotator datasource.

Example

HTML

<div id="rotator" data-role="ejmrotator" data-ej-targetid="rotatorcontent">

    </div>

    <div id="rotatorcontent">

        <div class="background-image:;height:350px;width:630px">

        </div>

    </div>

    //To set the dataSource API value

    <script>

        $(function () {

            var imgdata = [{ imageUrl: 'bird.jpg' }, { imageUrl: 'wheat.jpg' }, { imageUrl: 'card.jpg' }, { imageUrl: 'rose.jpg' }, { imageUrl: 'snowfall.jpg' }];

            // To get the instance of the rotator control



            var rotObj = $("#rotator").data("ejmRotator");

            rotObj.renderDatasource(imgdata); 

        });

    </script>

Events

change

Event triggers when the rotator changes from one slide to another slide

Name	Type	Description
argument.cancel	boolean	returns the cancel option value
argument.model	object	returns the Rotator model
argument.type	string	returns the name of the event
argument.targetElement	string	returns the targetElement of the rotator
argument.value	number	returns the current slide index.

Example

HTML

<div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>s

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent" data-ej-change="change">

    </div>

    <script>

        function change(args) {

            //handle the event

        }

    </script>

pagerSelect

Event triggers when the rotator’s pager clicked

Name	Type	Description
argument.cancel	boolean	returns the cancel option value
argument.model	object	returns the Rotator model
argument.type	string	returns the name of the event
argument.targetElement	string	returns the targetElement of the rotator
argument.value	number	returns the current slide index.

Example

HTML

<div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>s

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent" data-ej-pagerselect="pagerSelect">

    </div>

    <script>

        function pagerSelect(args) {

            //handle the event

        }

    </script>

swipeDown

Event triggers when the swipeDown happens in the Rotator

Name	Type	Description
argument.cancel	boolean	returns the cancel option value
argument.model	object	returns the Rotator model
argument.type	string	returns the name of the event
argument.targetElement	string	returns the targetElement of the rotator
argument.value	number	returns the current slide index.

Example

HTML

<div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>s

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent" data-ej-swipedown="swipeDown">

    </div>

    <script>

        function swipeDown(args) {

            //handle the event

        }

    </script>

swipeLeft

Event triggers when the swipeLeft happens.

Name	Type	Description
argument.cancel	boolean	returns the cancel option value
argument.model	object	Returns the Rotator model
argument.type	string	Returns the name of the event
argument.targetElement	string	Returns the targetElement of the Rotator
argument.value	number	Returns the current slide index.

Example

HTML

<div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>s

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent" data-ej-swipeleft="swipeLeft">

    </div>

    <script>

    function swipeLeft(args) {

        //handle the event

    }

    </script>

swipeRight

Event triggers when the swipeRight happens in the Rotator

Name	Type	Description
argument.cancel	boolean	returns the cancel option value
argument.model	object	returns the Rotator model
argument.type	string	returns the name of the event
argument.targetElement	string	returns the targetElement of the rotator
argument.value	number	returns the current slide index.

Example

HTML

<div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>s

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent" data-ej-swiperight="swipeRight">

    </div>

    <script>

        function swipeRight(args) {

            //handle the event

        }

    </script>

swipeUp

Event triggers when the swipeUp happens in the Rotator

Name	Type	Description
argument.cancel	boolean	returns the cancel option value
argument.model	object	returns the Rotator model
argument.type	string	returns the name of the event
argument.targetElement	string	returns the targetElement of the rotator
argument.value	number	returns the current slide index.

Example

HTML

<div id="rotatorcontent">

        <div data-ej-imageurl="bird.jpg">

        </div>

        <div data-ej-imageurl="wheat.jpg">

        </div>

        <div data-ej-imageurl="card.jpg">

        </div>

        <div data-ej-imageurl="rose.jpg">

        </div>

        <div data-ej-imageurl="snowfall.jpg">

        </div>s

        <div data-ej-imageurl="bird.jpg">

        </div>

    </div>

    <div id="rotatordefault" data-role="ejmrotator" data-ej-targetid="rotatorcontent" data-ej-swipeup="swipeUp">

    </div>

    <script>

        function swipeUp(args) {

            //handle the event

        }

    </script>

ejmRotator

Requires

Members

currentItemIndex Int

Default Value:

Example

dataSource

Default Value:

Example

cssClass String

Default Value:

Example

enablePersistence Boolean

Default Value:

Example

items Array

Default Value:

Example

orientation Enum

Default Value:

Example

pagerPosition Enum

Default Value:

Example

showPager Boolean

Default Value:

Example

renderMode Enum

Default Value:

Example

targetHeight String

Default Value:

Example

targetId String

Default Value:

Example

targetWidth String

Default Value:

Example

Methods

renderDatasource()

Example

Events

change

Example

pagerSelect

Example

swipeDown

Example

swipeLeft

Example

swipeRight

Example

swipeUp

Example

currentItemIndex `Int`

cssClass `String`

enablePersistence `Boolean`

items `Array`

orientation `Enum`

pagerPosition `Enum`

showPager `Boolean`

renderMode `Enum`

targetHeight `String`

targetId `String`

targetWidth `String`