New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Rotator Types

  • Demo Configurator
Choose Rotator type:
AutomaticAdvance

This example shows the different RadRotator types. Select a rotator type from the dropdown list and it will be loaded with an AJAX request.

  • AutomaticAdvance - Items are scrolled automatically in the desired direction. Each item is shown for a specific amount of time.
  • Buttons - For each scroll direction the rotator will display a control button. The user needs to click this button to scroll a new item.
  • ButtonsOver - For each scroll direction the rotator will display a control button. The user needs to hover over this button with the mouse to scroll new items.
  • SlideShow - Like automatic advance, but instead of scrolling, new items are displayed using a transition effect (e.g. Fade).
  • SlideShowButtons - For each scroll direction the rotator will display a control button. The user needs to click this button to display a new item.
  • FromCode - The rotator will not change items automatically and will not display the control buttons. The rotator's client API can be used to move the items.

When you set one of the following modes: Buttons, ButtonsOver or SlideshowButtons, you should add 40 pixels to the Width property. This is needed because by design buttons have dimentions 20x20 pixels.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.RotatorTypes.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!DOCTYPE html>
<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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="Server" Transparency="30"
                                 EnableSkinTransparency="false" BackColor="#E0E0E0">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RotatorTypesList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadRotator1" LoadingPanelID="LoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RotatorTypesList" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
        <div class="demo-container size-narrow">
                <telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Width="224px" Height="112px"
                                    CssClass="rotatorStyle" ItemHeight="112" ItemWidth="112" ScrollDuration="500" OnClientLoad="rotator_load">
                    <Items>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/ANATR.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image1" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/ANTON.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image2" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/BOTTM.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image3" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/CACTU.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image3" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/CENTC.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image3" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/ERNSH.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image3" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/LAUGB.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image3" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/MAISD.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image3" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/MEREP.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                        <telerik:RadRotatorItem>
                            <ItemTemplate>
                                <asp:Image runat="server" ID="Image3" ImageUrl='~/Rotator/images/Northwind/Customers/Thumbs/OCEAN.jpg'
                                           CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                            </ItemTemplate>
                        </telerik:RadRotatorItem>
                    </Items>
                </telerik:RadRotator>
        </div>
    </telerik:RadAjaxPanel>
    <script src="scripts.js" type="text/javascript"></script>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <span class="label">Choose Rotator type:</span>
                <qsf:DropDownList ID="RotatorTypesList" runat="server" Width="300" AutoPostBack="true"
                                    OnSelectedIndexChanged="ConfigureRotator">
                </qsf:DropDownList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance