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.

Rotator - Rotator Types

Configure rotator type
  • AutomaticAdvance
  • ButtonsOver
  • Buttons
  • SlideShow
  • SlideShowButtons
  • FromCode
  • Carousel
  • CarouselButtons
  • CoverFlow
  • CoverFlowButtons

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.

Rotator Types

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
    <title>ASP.NET Rotator Demo - Rotator Types</title>
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</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">
        var currentRotator = null;
        function StartAutoRotation(rotator, args) {
            if (!rotator.autoIntervalID) {
                rotator.autoIntervalID = window.setInterval(function () {
                    rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
                }, rotator.get_frameDuration());
                currentRotator = rotator;
            }
        }

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
        function BeginRequestHandler(sender, args) {
            if (currentRotator != null) {
                window.clearInterval(currentRotator.autoIntervalID);
            }
        }
    </script>

     <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="Server" Transparency="30"
          EnableSkinTransparency="false" BackColor="#E0E0E0">
     </telerik:RadAjaxLoadingPanel>
     <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
          <div class="mainDiv">
               <div class="rotatorBackground">
                    <%-- ItemWidth and ItemHeight include 2x5(pixels) margin and 1x2(pixels) border --%>
                    <telerik:RadRotator ID="RadRotator1" runat="server" Width="224px" Height="112px"
                         CssClass="rotatorStyle" ItemHeight="112" ItemWidth="112" ScrollDuration="500">
                         <Items>
                              <telerik:RadRotatorItem>
                                   <ItemTemplate>
                                        <asp:Image runat="server" ID="Image" ImageUrl='~/Rotator/Img/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/Img/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/Img/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/Img/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/Img/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/Img/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/Img/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/Img/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/Img/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/Img/Northwind/Customers/Thumbs/OCEAN.jpg'
                                             CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                                   </ItemTemplate>
                              </telerik:RadRotatorItem>
                         </Items>
                    </telerik:RadRotator>
               </div>
               <div style="float: left; margin-left: 20px;">
                    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure rotator type"
                         Expanded="true" HorizontalAlign="Left" Width="300" CssClass="configurationPanel">
                         <telerik:RadListBox ID="RotatorTypesList" runat="server" Width="300" AutoPostBack="true"
                              OnSelectedIndexChanged="ConfigureRotator">
                         </telerik:RadListBox>
                    </qsf:ConfiguratorPanel>
               </div>
               <br class="qsf-clear-float" />
          </div>
     </telerik:RadAjaxPanel>
    </form>
</body>
</html>