Image Slider in ASP.NET using jQuery

In this article I am going to explain how we can create an image slide show in asp.net using jQuery.

Below is my aspx code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

   <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
    <link href="Styles/Default.css" rel="stylesheet" type="text/css" />
    <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/Demo.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(window).load(function () {
           $('#nivo-slider').nivoSlider();
        });
    </script>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div class="slider-wrapper theme-default">
        <div id="nivo-slider" class="nivoSlider">
            <img src="Nature1.jpg" alt="" />
            <img src="Nature2.jpg" alt="" />
            <img src="Nature3.jpg" alt="" />
            <img src="Nature4.jpg" alt="" />
        </div>
    </div>
</asp:Content>
 
When you will run the application then image will slide one by one you can also manage speed, opacity and other sliding property in nivo-slide.css file:



Image 1.

Image will rotate like. . .

Image 2.

Image 3.

Image 4.

You can use dot Image to show any particular image.