UI controls for ASP.NET AJAX, MVC, WPF,Silverlight, Windows 8 and Windows Phone
Cross-platform Mobile Development Toolwith cloud-based architecture
Everything you need to build sites andmobile apps with JavaScript and HTML5
One easy tool for Functional, Performance,Load and Mobile software testing
Everything for your online business - contentmanagement, ecommerce, emarketing
Simple and intuitive project managementand collaboration software
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.
This example shows the different RadRotator types. Select a rotator type from the dropdown list and it will be loaded with an AJAX request.
<%@ 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" /> <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>