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

CoverFlow Mode

Choose your Destination
  • Demo Configurator

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

Important: The CoverFlow mode of RadRotator works best, in case there is only a single image in every rotator item. The reflection feature of the CoverFlow mode is supported only in case there is an image in every rotator item. Note that you should specify enough height for the RadRotator so that both its items and its reflection are displayed. As shown in the example, the Height property of the RadRotator is greater than ItemHeight in order to create additional space for the reflection.

  • Enabling CoverFlow 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="CoverFlow">
    . . . . . . . . . . . . . . . . . . . . . . . .
  • Enabling CoverFlow mode in codebehind:
    RadRotator1.RotatorType = RotatorType.CoverFlow;

If the RotatorType="CoverFlowButtons" 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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.CoverFlowMode.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <span>Choose your Destination </span>
        <telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Width="748px" ItemWidth="150"
                            ScrollDirection="Left, Right" Height="233px" ItemHeight="113" ScrollDuration="500"
                            FrameDuration="2000" PauseOnMouseOver="false" RotatorType="CoverFlow" InitialItemIndex="4"
                            OnClientItemShown="OnClientItemShown" OnClientItemClicked="OnClientItemClicked"
                            CssClass="RemoveRotatorBorder">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Container.DataItem  %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>">
                </asp:Image>
            </ItemTemplate>
        </telerik:RadRotator>
        <script type="text/javascript">
            //<![CDATA[
            // The set_scrollAnimationOptions method takes two arguments - the first one is the ClientID of the rotator, which we want to configure and the second one is
            // a hash table with the options we want to apply.
            Telerik.Web.UI.RadRotatorAnimation.set_scrollAnimationOptions("<%= RadRotator1.ClientID %>", $telerikDemo.animationOptions);
            //]]>
        </script>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View runat="server">
                <asp:RadioButtonList ID="dblCoverFlowModes" runat="server" AutoPostBack="true" OnSelectedIndexChanged="dblCoverFlowModes_SelectedIndexChanged">
                    <asp:ListItem Selected="True" Text="CoverFlow" Value="CoverFlow"></asp:ListItem>
                    <asp:ListItem Selected="False" Text="CoverFlowButtons" Value="CoverFlowButtons"></asp:ListItem>
                </asp:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance