Rotator - Client-side API

Horizontal Scroll:
  • TURKEY: Stocks go up after a surge in investor confidence
  • ROMANIA: Privatization drives the stock market this week
  • BULGARIA: Government plans for a new wave of privatization
    
Vertical Scroll:
  • TURKEY: Stocks go up after a surge in investor confidence
  • ROMANIA: Privatization drives the stock market this week
  • BULGARIA: Government plans for a new wave of privatization
    
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Like all Telerik controls, the rotator has a rich client API. It has many client side functions which allow the developer to achieve their goal. This example illustrates how to use the FromCode rotator type. Here are the API functions we use

  • showNext(direction) - scrolls the rotator in the specified direction and shows the next frame. The direction parameter must be of type Telerik.Web.UI.RotatorScrollDirection.
  • get_frameDuration() - gets the currentrotator frame duration
  • DefaultCS.aspx
  • scripts.js
  • styles.css
  • news.xml
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow">
        <span class="title">Horizontal Scroll:</span>
        <div class="rotatatorLeftRightBack">
            <telerik:RadRotator RenderMode="Lightweight" ID="RadRotatorHorizontal" runat="server" Skin="Silk" DataSourceID="xmlDataSource1"
                                Height="60px" Width="250px" ItemHeight="60px" ItemWidth="250px" RotatorType="FromCode"
                                ScrollDirection="Left" CssClass="floatRotator" OnClientLoad="horizontalRotator_load">
                <ItemTemplate>
                    <div class="itemTemplate">
                    <%# XPath("Title") %>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
            <ul id="navigationHorizontal" class="commandsWrapper">
                <li>
                    <a href="#" onclick="stopRotator(this, 'horizontalRotator'); return false;"
                       class="stopSelected" title="Stop">
                        <span>Stop</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="startRotator(this, 'horizontalRotator', Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                       class="start" title="Start">
                        <span>Start</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'horizontalRotator', Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                       class="left" title="Left">
                        <span>Up</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'horizontalRotator', Telerik.Web.UI.RotatorScrollDirection.Right); return false;"
                       class="right" title="Right">
                        <span>Down</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="demo-container size-narrow">
        <span class="title">Vertical Scroll:</span>
        <div class="rotatatorUpDownBack">
            <telerik:RadRotator RenderMode="Lightweight" ID="RadRotatorVertical" runat="server" Skin="Silk" DataSourceID="xmlDataSource1"
                                RotatorType="FromCode" Height="40px" Width="250px" ItemHeight="40px" ItemWidth="250px"
                                ScrollDirection="Up" CssClass="floatRotator" OnClientLoad="verticalRotator_load">
                <ItemTemplate>
                    <div class="itemTemplate">
                    <%# XPath("Title") %>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
            <ul id="navigationVertical" class="commandsWrapper">
                <li>
                    <a href="#" onclick="stopRotator(this, 'verticalRotator'); return false;"
                       class="stopSelected" title="stop">
                        <span>stop</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="startRotator(this, 'verticalRotator', Telerik.Web.UI.RotatorScrollDirection.Up); return false;"
                       class="start" title="start">
                        <span>start</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'verticalRotator', Telerik.Web.UI.RotatorScrollDirection.Down); return false;"
                       class="down" title="down">
                        <span>down</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'verticalRotator', Telerik.Web.UI.RotatorScrollDirection.Up); return false;"
                       class="up" title="up">
                        <span>up</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <asp:XmlDataSource ID="xmlDataSource1" runat="server" DataFile="news.xml"></asp:XmlDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?