Introduction: In this article we will explore how to slide an images using jQuery and how it is possible to slide the images in ASP.NET using jQuery. We often see this inside websites that at the corner, images slide one by one; it may be advertisement images or the images you want to display for commercially or for look and feel. By using this type of functionality we can give an awesome effect to our website that will produce a great effect on the user of the website. You often seen that these are basically built on flash but by using jQuery in ASP.NET we can build this type of functionality. For doing this we have to use a CSS style sheet that will be necessary to set the position, z-index, border etc. Now it's time to see how we will make it :

Step 1: Firstly we have to create a web Application.

Step_1fig.gif

Step 2: Secondly you have to add a new page to the website

step2.gif

Next--> Click

Step_2_2fig.gif

Step 3: In this step you should have to add some images to the project let see how it will looks like. These are the images basically i used but you can use your own images whatever you want to do:

Step_3fig.jpg

Step 4: In this code you will see that we have to add some images inside the default2.aspx page now let see that how we will add it. First of all we have to take a div inside it we will take the images whatever the number you want let see the body code of the default2.aspx page:

Body Code:

<body style="font-family: Arial, Sans-serif, sans;">
 <h1 style="border: 5px groove #C0C0C0; font-family: 'Comic Sans MS'; font-size: xx-large; color: #00FF00; background-color: #2a2a2a;">Simple jQuery Slideshow</h1>
 <div id="s_show">
 <img src="images/ch.jpeg" alt="img" />
 <img src="images/ch1.jpeg" alt="img1" />
 <img src="images/ch2.jpeg" alt="img2" />
 <img src="images/ch3.jpeg" alt="imge3" />
 <img src="images/ch4.jpeg" alt="img4" />
 <img src="images/ch5.jpeg" alt="img5" />
 <img src="images/bvnvcm.jpeg" alt="img6" />
 <img src="images/gfndfnj.jpeg" alt="img7" class="active" />
 <img src="images/hgjf.jpeg" alt="img4" />
</div>
<h1 style="border: 5px groove #800000; font-family: 'Comic Sans MS'; font-size: xx-large; color: #CCFF33; background-color: #2a2a2a; position: absolute;">Let see the slide show will display images one by one</h1>
 </body>

Step 5: In this step we will see that how to add style sheet code, Whenever we will write the style sheet code you have to care that it will be write inside the <style></style> code and you have to plcaced it inside the head section:

Style Code:

<style type="text/css">
 #s_show {
position:relative;
height:350px;
background-color:#2a2a2a;
border:5px groove Fuchsia;
}
#s_show IMG {
position:absolute;
top:40px;
left:50px;
border-width:5px;
border-color:Fuchsia;
border-style:groove;
z-index:8;
opacity:0.0;
}
#s_show IMG.active {
z-index:10;
opacity:1.0;
}
#s_show IMG.last-active {
z-index:9;
}
</style>

Step 6: In this step we have to write the script reference to the aspx page let see from where you have to write the script code:

Step_3_img.gif

Step 7: Let see the script code which you have to add inside the<script></script> and will be paced either head section or body section as you want:

Step_7fig.jpg

Step 8: In this step we have to write the jQuery code which is given below:

Step_8fig.jpg

Step 9: In this step we will see the complete code for the Default2.aswpx page let see the code given below:

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title>jQuery Slideshow</title>
 <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
 <script type="text/javascript">
 function slideShow() {
var $active = $('#s_show IMG.active');
if ($active.length == 0) $active = $('#s_show IMG:last');
var $next = $active.next().length ? $active.next()
: $('#s_show IMG:first');
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function () {
$active.removeClass('active last-active');
});
}

$(function () {
setInterval("slideShow()", 3000);
});
</script>
<style type="text/css">
 #s_show {
position:relative;
height:350px;
background-color:#2a2a2a;
border:5px groove Fuchsia;
}
#s_show IMG {
position:absolute;
top:40px;
left:50px;
border-width:5px;
border-color:Fuchsia;
border-style:groove;
z-index:8;
opacity:0.0;
}
#s_show IMG.active {
z-index:10;
opacity:1.0;
}

#s_show IMG.last-active {
z-index:9;
}
</style>
</head>
<body style="font-family: Arial, Sans-serif, sans;">
 <h1 style="border: 5px groove #C0C0C0; font-family: 'Comic Sans MS'; font-size: xx-large; color: #00FF00; background-color: #2a2a2a;">Simple jQuery Slideshow</h1>
 <div id="s_show">
 <img src="images/ch.jpeg" alt="img" />
 <img src="images/ch1.jpeg" alt="img1" />
 <img src="images/ch2.jpeg" alt="img2" />
 <img src="images/ch3.jpeg" alt="imge3" />
 <img src="images/ch4.jpeg" alt="img4" />
 <img src="images/ch5.jpeg" alt="img5" />
 <img src="images/bvnvcm.jpeg" alt="img6" />
 <img src="images/gfndfnj.jpeg" alt="img7" class="active" />
 <img src="images/hgjf.jpeg" alt="img4" />
</div>
<h1 style="border: 5px groove #800000; font-family: 'Comic Sans MS'; font-size: xx-large; color: #CCFF33; background-color: #2a2a2a; position: absolute;">Let see the slide show will display images one by one</h1>
 </body>
</html>

Step 10: In this step we will see the design of the Default2.aspx page which is given below:

Step_10fig.jpg

Step 11: In this step we are going to run the Default2.aspx page by pressing F5:

Output1:

output1.jpg

Output2:

output2.jpg

Output3:

output3.jpg

Output4:

Output4.jpg

Output5:

output5.jpg