Post
Ask Question

Build Image Slider With ASP.NET

Introduction

The Microsoft ASP. NET technologies helps to build websites, and the web sites may be contain image sliders. When you want to put an image control in your website and attach many images with this control, and then if you want this image control to automatically rotate those images then I think the first thing you must do it with Ajax, for that you create a XML file as described here.

XmlFile.XML

Note: add a XML file along with your website in the Solution Explorer, then right-click on the XML page thenselect "Properties" -> "Schemas" , then add the Schema name "adrotator.xsd" then write the following code:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <Advertisements>  
  3.   <Ad>  
  4.     <ImageUrl>http://localhost:64916/images/img2.jpg</ImageUrl>  
  5.   </Ad>  
  6.   <Ad>  
  7.     <ImageUrl>http://localhost:64916/images/img3.jpg</ImageUrl>  
  8.   </Ad>  
  9.   <Ad>  
  10.     <ImageUrl>http://localhost:64916/images/img4.jpg</ImageUrl>  
  11.   </Ad>  
  12. </Advertisements> 

After creating this file, drag and drop the ScriptManager control on the top of your "aspx" page in the design site then drag and drop the UpdatePanel and Timer control from the AJAX Extensions then drag and drop an AdRotator control and put it into the UpdatePanel. You must also place the timer control inside the UpdatePanel. Simply set the timer control's "interval" property and add the "advertisement file", in other words the previously created "XML file" into the AdRotator "advertisement file" properties.

Simply run your website, the image rotator will work properly.

Source Code

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  Debug="true"%>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.     <div>  
  10.         <asp:ScriptManager ID="ScriptManager1" runat="server">  
  11.         </asp:ScriptManager>  
  12.         <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
  13.             <ContentTemplate>  
  14.                 <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/XMLFile.xml" />  
  15.                 <asp:Timer ID="Timer1" runat="server" Interval="2000">  
  16.                 </asp:Timer>  
  17.             </ContentTemplate>  
  18.         </asp:UpdatePanel>  
  19.         </div>  
  20.     </form>  
  21. </body>  
  22. </html> 

Output

adrotator-ajax.gif

Image slider with JavaScript in ASP.NET

If you not want to use all these things to simply use an image control and manage that control by JavaScript, then for the image rotation to occur automatically in ASP.NET websites, let's see how to do that.

I wrote some simple code for doing all the preceding AJAX functionality with some simple JavaScript code.

The following script code does all those things efficiently and easily.

  1. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>  
  2.         <script type="text/javascript">  
  3.             var NoofImage = ['http://localhost:64916/images/img1.png', 'http://localhost:64916/images/img2.jpg', 'http://localhost:64916/images/img3.jpg', 'http://localhost:64916/images/img4.jpg'];  
  4.             var count = NoofImage.length;  
  5.             $(function () { setInterval(Slider, 2000) });  
  6.             function Slider()  
  7.             {  
  8.                 $('#imageSlide').fadeIn("slow",function(){$(this).attr('src', NoofImage[(NoofImage.length++)%count]).fadeIn("slow");  
  9.                 });  
  10.             }  
  11. </script>  
Now let's see the full source code
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  Debug="true"%>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.     <div>  
  10.    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>  
  11.         <script type="text/javascript">  
  12.             var NoofImage = ['http://localhost:64916/images/img1.png', 'http://localhost:64916/images/img2.jpg', 'http://localhost:64916/images/img3.jpg', 'http://localhost:64916/images/img4.jpg'];  
  13.             var count = NoofImage.length;  
  14.             $(function () { setInterval(Slider, 2000) });  
  15.             function Slider()  
  16.             {  
  17.                 $('#imageSlide').fadeIn("slow",function(){$(this).attr('src', NoofImage[(NoofImage.length++)%count]).fadeIn("slow");  
  18.                 });  
  19.             }  
  20.         </script>  
  21.         <img id="imageSlide" src="www.c-sharpcorner.com" style="height: 250px; width: 250px" />  
  22.         </div>  
  23.     </form>  
  24. </body>  
  25. </html> 

Output

image-slider-javascript.gif


Similar Articles