Rotator - Rotator Types

Demo Configurator

Choose Rotator type:
AutomaticAdvance
Isolate this demo as a stand-alone application

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.

<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.RotatorTypes.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" />
</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 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>

Find Assistance

Help Us Improve

Was this example helpful?