Rotator

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadRotator - Telerik's ASP.NET Rotator

Configure RadRotator
Direction
RotatorType
ScrollDuration
FrameDuration
Width (px)
ItemWidth (px)
Height (px)
ItemHeight (px)
WrapFrames
Scroll items by dragging

tlrk.it/15FIQXH To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/15FIQXH

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.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Rotator demo, you can use the following path to find it in the sample website application:
rotator/examples/overview

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

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Rotator/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>ASP.NET Content Rotator Examples | RadRotator for AJAX</title>
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
     <style type="text/css">
          .RadForm_MetroTouch .configurationPanel,
          .RadForm_BlackMetroTouch .configurationPanel
          {
               height: 540px;
          }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

    <script type="text/javascript">
        function StartAutoRotation(rotator, args) {
            if (!rotator.autoIntervalID) {
                rotator.autoIntervalID = window.setInterval(function () {
                    rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
                }, rotator.get_frameDuration());
            }
        }

        function toggleAnimationType(sender) {
            $get("animationType").style.display = (sender.value == "SlideShow" || sender.value == "SlideShowButtons") ? "" : "none";
        }
    </script>

     <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
     </telerik:RadAjaxLoadingPanel>
     <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1"
          EnableAJAX="false">
          <div class="mainDiv">
               <div class="rotatorBackground">
                    <telerik:RadRotator ID="RadRotator1" runat="server" Width="330px" Height="120px"
                         CssClass="horizontalRotator" ScrollDuration="500" FrameDuration="2000" ItemHeight="120"
                         ItemWidth="110">
                         <ItemTemplate>
                              <img class="item" src='<%# Page.ResolveUrl("~/Rotator/Img/Northwind/Customers/Thumbs/") + Container.DataItem %>.jpg'
                                   alt="Customer Image" />
                         </ItemTemplate>
                    </telerik:RadRotator>
               </div>
               <div>
                    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure RadRotator"
                         Expanded="true" CssClass="configurationPanel" HorizontalAlign="Left" Width="330">
                         <div class="configurationPanel">
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        Direction
                                   </div>
                                   <div>
                                        <asp:DropDownList runat="server" ID="ScrollDirection" Style="width: 180px;" OnSelectedIndexChanged="ScrollDirection_SelectedIndexChanged">
                                             <asp:ListItem Selected="true" Value="Horizontal">Horizontal</asp:ListItem>
                                             <asp:ListItem Value="Vertical">Vertical</asp:ListItem>
                                        </asp:DropDownList>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        RotatorType
                                   </div>
                                   <div>
                                        <asp:DropDownList runat="server" ID="RadRotatorType" OnSelectedIndexChanged="RadRotatorType_SelectedIndexChanged" onchange="toggleAnimationType(this);" Style="width: 180px;">
                                        </asp:DropDownList>
                                   </div>
                              </div>
                              <div id="animationType" class="propertyRow" style="display: none;">
                                   <div class="propertyName">
                                        AnimationType
                                   </div>
                                   <div>
                                        <asp:DropDownList runat="server" ID="RadRotatorAnimationType" Style="width: 180px;">
                                        </asp:DropDownList>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        ScrollDuration
                                   </div>
                                   <div>
                                        <asp:TextBox runat="server" ID="ScrollDuration" Columns="5" Style="width: 180px;"></asp:TextBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        FrameDuration
                                   </div>
                                   <div>
                                        <asp:TextBox runat="server" ID="FrameDuration" Columns="5" Style="width: 180px;"></asp:TextBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        Width (px)
                                   </div>
                                   <div>
                                        <asp:TextBox runat="server" ID="txtWidth" Columns="5" Style="width: 180px;"></asp:TextBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        ItemWidth (px)
                                   </div>
                                   <div>
                                        <asp:TextBox runat="server" ID="ItemWidth" Columns="5" Style="width: 180px;"></asp:TextBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        Height (px)</div>
                                   <div>
                                        <asp:TextBox runat="server" ID="txtHeight" Columns="5" Style="width: 180px;"></asp:TextBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        ItemHeight (px)
                                   </div>
                                   <div>
                                        <asp:TextBox runat="server" ID="ItemHeight" Columns="5" Style="width: 180px;"></asp:TextBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        WrapFrames
                                   </div>
                                   <div>
                                        <asp:CheckBox runat="server" ID="WrapFrames"></asp:CheckBox>
                                   </div>
                              </div>
                        <div class="propertyRow" runat="server" id="DragScrollingRow">
                                   <div class="propertyName">
                                        Scroll items by dragging
                                   </div>
                                   <div>
                                        <asp:CheckBox runat="server" ID="DragScrolling"></asp:CheckBox>
                                   </div>
                              </div>
                              <div style="width: 150px; float: right; margin: 20px 20px 0 0;">
                                   <asp:Button ID="Button1" runat="server" Text="Configure Rotator" OnClick="ConfigureRotator">
                                   </asp:Button>
                              </div>
                         </div>
                    </qsf:ConfiguratorPanel>
               </div>
          </div>
     </telerik:RadAjaxPanel>
    <br class="qsf-clear-float" />
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Rotator.png" AlternateText="tlrk.it/15FIQXH" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/15FIQXH">tlrk.it/15FIQXH</a>
    </div>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here