RadRotator - Telerik ASP.NET Rotator

Demo Configurator

  • Rotator Types

    • Direction
    • Rotator TypeAutomaticAdvance
    Animation
    Dimensions
  • Configure Rotator
Isolate this demo as a stand-alone application

About RadRotator for ASP.NET AJAX

From stock tickers and news scrollers, to product spotlights, weather forecasts, testimonials, running promotions and banner ads, Telerik Rotator control delivers high interactivity and user involvement to any web app. Its rich client-side API allows for extensive customizations in terms of both functionality and appearance (scrolling direction, type of rotator, rotating speed, transition effects, etc).

RadRotator and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • ScrollDirection - specifies possible directions for scrolling rotator frames
  • RotatorType - specifies the type of rotator [how the rotator will render and what options the user will have for interacting with it on the client]
  • SlideShowAnimation-Type - Specifies the type of the animation (takes effect only when the RotatorType property is set to SlideShow or SlideShowButtons)
  • ScrollDuration - specifies the speed in milliseconds for scrolling rotator frames
  • FrameDuration - specifies the time in milliseconds each frame will display in automatic scrolling scenarios
  • WrapFrames - when set to true, this property configures the RadRotator to start scrolling the rotator frames from the beginning, once the rotator shows the last frame
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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 src="scripts.js" type="text/javascript"></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-containers">
        <div class="demo-container">
            <telerik:RadRotator ID="RadRotator1" runat="server" Width="330" Height="120" CssClass="horizontalRotator"
                ScrollDuration="500" FrameDuration="2000" ItemHeight="120" ItemWidth="110">
                <ItemTemplate>
                    <img class="item" src='<%# Page.ResolveUrl("~/Rotator/images/Northwind/Customers/Thumbs/") + Container.DataItem %>.jpg'
                        alt="Customer Image" />
                </ItemTemplate>
            </telerik:RadRotator>
        </div>
    </div>
    <telerik:RadAjaxManager runat="server" ID="AjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadRotator1" LoadingPanelID="LoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="LoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?