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

Slide Show

  • Marketing Strategy

    • Product Mix
    • Pricing
    • Promotion

  • Product Mix

    • Product Line Extension
    • Branding Initiatives
    • Core Product Strengths

  • Pricing

    • Market Segmentation by Price
    • Defensive Pricing Strategy
    • Contingency Plan

  • Promotion

    • Brand Revitalization
    • Integrated Communication Mix
    • New Media initiatives
    
Previous Slide Next Slide

This example shows how to create a MS PowerPoint like presentation system that works on any computer with a browser.

It uses custom control buttons instead of the default RadRotator buttons to change between the slides. Note that there is no need to write custom JavaScript code in order to enable the custom buttons.

You can also easily set up a different transition effect or enable automatic slide transitions by changing the RotatorType and SlideShowAnimation properties.

  • DefaultCS.aspx
  • Styles.css
  • presentation.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 rel="stylesheet" type="text/css" href="Styles.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">
        <telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Skin="Silk" DataSourceID="xmlDataSource1"
                            FrameDuration="4000" RotatorType="SlideShowButtons" SlideShowAnimation-Type="Fade"
                            Width="400" ItemWidth="400" Height="200" ItemHeight="200" CssClass="rotator"
                            ScrollDirection="Left,Right">
            <ItemTemplate>
                <div class="itemTemplate">
                    <div class="title">
                    <%# XPath("Title")%>
                    </div>
                    <div class="presentation">
                    <%# XPath("NewsData") %>
                    </div>
                </div>
            </ItemTemplate>
            <ControlButtons LeftButtonID="prevButton" RightButtonID="nextButton"></ControlButtons>
        </telerik:RadRotator>
        <div class="navigation">
            <asp:Image ImageUrl="images/previousSlide.gif" ID="prevButton" AlternateText="Previous Slide"
                       runat="Server" Height="34" Width="33" Style="border: 0px"></asp:Image>
            <asp:Image ImageUrl="images/nextSlide.gif" ID="nextButton" AlternateText="Next Slide"
                       runat="Server" Height="34" Width="31" Style="border: 0px"></asp:Image>
        </div>
    </div>
    <asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="presentation.xml">
    </asp:XmlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance