Implementing Ajax SlideShowExtender Control in ASP.NET

In this article I am going to implement a very interesting control of AJAX. The SlideShowExtender is used to show the content like a slide show in PowerPoint of Microsoft Office. This article will show you that how can we built our custom Slide Show using SlideShowExtender Control. Also I have used the JavaScript code to do this.  I have used only a single Image control and showing various Images on button click.

Free Download

Ajax SlideShowExtender : Demo Project

Controls and Properties:

1. Image Control : id=”Image1″.

2. Button : id=”buttonPrev”.

3. Button : id=”buttonPlay”.

4. Button : id=”buttonNext”.

5. SlideShowExtender : id=”SlideShowExtender1“.

JavaScript Code:

 <script runat="Server" type="text/C#">
        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]

        public static AjaxControlToolkit.Slide[] GetSlides()
 {
            AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[5];
            slides[0] = new AjaxControlToolkit.Slide("images/text.jpg", "First image of my album", "First Image");
            slides[1] = new AjaxControlToolkit.Slide("images/tnacer travelmate 730.jpg", "Second image of my album", "Second Image");
            slides[2] = new AjaxControlToolkit.Slide("images/tnaci concept.jpg", "Third image of my album", "Third Image");
            slides[3] = new AjaxControlToolkit.Slide("images/tnarmada100s.jpg", "Fourth image of my album", "Fourth Image");
            slides[4] = new AjaxControlToolkit.Slide("images/tnibm thinkpad.jpg", "Fifth image of my album", "Fifth Image");
            return (slides);
        }
 </script>

Page Source Code:

 <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

 </asp:ScriptManager>
<asp:SlideShowExtender ID="SlideShowExtender1" runat="server" AutoPlay="true" ImageDescriptionLabelID="lbldatails" TargetControlID="Image1" Loop="true" StopButtonText="Stop"
PlayButtonText="Play" NextButtonID="buttonNext" PreviousButtonID="buttonPrev"
PlayButtonID="buttonPlay" SlideShowServiceMethod="GetSlides" UseContextKey="True"></asp:SlideShowExtender>
<asp:Image ID="Image1" runat="server" Height="200px" Width="200px" />
<asp:Label ID="lbldatails" runat="server" Text="Label"></asp:Label>
<asp:Button ID="buttonPrev" runat="Server" Text="Previous" Width="80px" />
<asp:Button ID="buttonPlay" runat="server" Text="Play" Width="80px" />
<asp:Button ID="buttonNext" runat="Server" Text="Next" Width="80px" />