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

Binding to Banners

  • Demo Configurator
Change Rotator Type:
AutomaticAdvance

With the new AdRotator functionality it is easier than ever to bind the rotator to a set of banners (ads).

All you need to do is set the BannersPath property to the location of the images and you're done. The Rotator will search the folder for images, create the data source and start animating the images instantly. If a new image is added to the directory, it will appear in the rotator on the next trip to the server.

This functionality is compatible with all rotator types (shown in the demo), enabling you to choose the right type for your scenario.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.AdRotator.DefaultCS"CodeFile="DefaultCS.aspx.cs" Language="C#"  %>

<!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" />
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" />
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RotatorTypesDD">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadRotator1" LoadingPanelID="LoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RotatorTypesDD" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-medium">
        <telerik:RadRotator RenderMode="Lightweight" runat="server" ID="RadRotator1" Width="320px" ItemWidth="160px"
                            Height="120px" ItemHeight="113px" BannersPath="~/Rotator/Examples/CoverFlowMode/Images">
        </telerik:RadRotator>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <span class="label">Change Rotator Type:</span>
                <qsf:DropDownList ID="RotatorTypesDD" AutoPostBack="true" runat="server" OnSelectedIndexChanged="RotatorTypesDD_SelectedIndexChanged" />
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance