ejmRotator

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:

    • 0

    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>