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 - Carousel Mode

Switch between two Carousel modes

Enabling RadRotator's Carousel mode

Telerik RadRotator supports (starting from Q2 2010) two additional RotatorTypes - Carousel and CarouselButtons. Modes can be set using RotatorType property of the control.

Important: The Carousel mode of RadRotator works best, in case there is only a single image in every rotator item.

  • Enabling Carousel mode directly on the markup:
    <telerik:RadRotator ID="RadRotator1" runat="server" Width="810px" ItemWidth="300"
        Height="350px" ItemHeight="220" ScrollDuration="500" FrameDuration="2000" EnableRandomOrder="true"
        PauseOnMouseOver="false" Skin="Windows7" RotatorType="Carousel">
    . . . . . . . . . . . . . . . . . . . . . . . .
  • Enabling Carousel mode in codebehind:
    RadRotator1.RotatorType = RotatorType.Carousel;

If the RotatorType="CarouselButtons" is set, then the items are moved by clicking the RadRotator's default navigation buttons located on the left and right side of the control.

In this example, RadRotator shows the content of a directory. The images are loaded using the GetFilesInFolder method, shown in the codebehind file.

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.CarouselMode.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 - Carousel Mode</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" />
     <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Switch between two Carousel modes"
          Expanded="true" Style="text-align: left;" HorizontalAlign="Right" Width="815">
          <asp:RadioButtonList ID="dblCarouselModes" runat="server" AutoPostBack="true" OnSelectedIndexChanged="dblCarouselModes_SelectedIndexChanged">
               <asp:ListItem Selected="True" Text="Carousel" Value="Carousel"></asp:ListItem>
               <asp:ListItem Selected="False" Text="CarouselButtons" Value="CarouselButtons"></asp:ListItem>
          </asp:RadioButtonList>
     </qsf:ConfiguratorPanel>
     <div class="mainDiv">
          <asp:Panel ID="RotatorWrapper" runat="server" CssClass="rotNoButtonsBack">
               <telerik:RadRotator ID="RadRotator1" runat="server" Width="810px" ItemWidth="300"
                    Height="350px" ItemHeight="220" ScrollDuration="500" FrameDuration="2000" PauseOnMouseOver="false"
                    RotatorType="CarouselButtons" OnClientItemClicked="OnClientItemClicked">
                    <ItemTemplate>
                         <asp:Image ID="Image1" runat="server" ImageUrl='<%# Container.DataItem  %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>">
                         </asp:Image>
                    </ItemTemplate>
               </telerik:RadRotator>
          </asp:Panel>
          <script type="text/javascript">
               function OnClientItemClicked(sender, args) {
                    sender.set_currentItemIndex(args.get_item().get_index(), true);
               }
          </script>
     </div>
    </form>
</body>
</html>