Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Image Slider in ASP.NET using jQuery

Article:
Viewed:  20210 
Posted On:  03/12/2013 11:10:36 
How we can make a Image Slider Control 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 slide show using jQuery.png

Image 1.

Image will rotate like. . .

Image slide show using jQuery 2.png

Image 2.

Image slide show using jQuery 3.png

Image 3.

Image slide show using jQuery 4.png

Image 4.

You can use dot Image to show any particular image.

  Comment:
 
By Laldingliana  On  28/03/2016 07:03:45
wheres the script and style files???
 
By Shalin  On  20/01/2015 05:04:30
Where i get JS and CSS file?
 
By Martin  On  26/06/2014 21:46:57
Nice article... But I need it with database. While searching I found this article about responsive and database driven image slider in asp .net: http://www.codingfusion.com/Post/Dynamic-Nivo-Responsive-Image-slider-with-database
 
By Mark  On  12/02/2014 01:19:05
Hello Sir your image slider was cool. but where can i find the css ? i have an error on this code it says :Validation (XHTML 1.1): Element 'link' cannot be nested within element 'div'. can you help me ?
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us