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

Thumb Scroller

This example illustrates the ease with which you could create great looking dynamic html scrollers using RadRotator. Since RadRotator is a templated control you could virtually put any content (text, images, flash, server controls) inside it and it will just work.

The example also shows how to create a rotator with custom buttons without the need for additional client-side code.

  • DefaultCS.aspx
  • styles.css
  • data.xml
<%@ Page Language="C#" AutoEventWireup="true"  %>

<!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" />
</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">
        <asp:Image ImageUrl="images/right.gif" ID="img_right" AlternateText="right" runat="server" CssClass="rightArrow" />
        <asp:Image ImageUrl="images/left.gif" ID="img_left" AlternateText="left" runat="server" CssClass="leftArrow" />
        <div id="scroller-container">
            <div style="margin-left: 20px; padding-top: 20px;">
                <telerik:RadRotator RenderMode="Lightweight" DataSourceID="xmlDataSource1" runat="server" Skin="Silk" ID="RadRotator1"
                                    Width="320px" Height="50px" ItemWidth="80px" ItemHeight="50px" FrameDuration="1" RotatorType="ButtonsOver">
                    <ItemTemplate>
                        <div class="itemTemplate">
                            <img src="images/<%# XPath("Image") %>" alt="" style="margin: 0px 11px;" />
                        </div>
                    </ItemTemplate>
                    <ControlButtons LeftButtonID="img_left" RightButtonID="img_right"></ControlButtons>
                </telerik:RadRotator>
            </div>
        </div>
    </div>
    <asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="data.xml"></asp:XmlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance