This article demonstrates how to display Panels one after the other, and after a fixed duration, like a slide show. The Panels should have a sliding effect.
Note that for demonstration purposes, I have included jQuery code and css in the same page. Ideally, these resources should be created in separate folders for maintainability. The code shown below has been tested on IE7, IE8, Firefox 3, Chrome 2 and Safari 4
Let us quickly jump to the solution and see how create a SlideShow with ASP.NET Panels
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.divNoBorder
{
background-color:White;
font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial;
font-size:12px;
color:#000000;
width:510px;
margin-left:auto;
margin-right:auto;
padding:10px;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $divSlide = $("div.slide");
$divSlide.hide().eq(0).show();
var panelCnt = $divSlide.length;
setInterval(panelSlider, 3000);
function panelSlider() {
$divSlide.eq(($divSlide.length++) % panelCnt)
.slideUp("slow", function() {
$divSlide.eq(($divSlide.length) % panelCnt)
.slideDown("slow");
});
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divNoBorder">
<h2>Slide Show with Panels.
Each Panel is Visible for 3 seconds.</h2>
<br /><br />
<asp:Panel ID="panelOne" runat="server" class='slide'>
Panel 1 Content Panel 1 Content Panel 1 Content
Panel 1 Content Panel 1 Content Panel 1 Content
Panel 1 Content Panel 1 Content Panel 1 Content
Panel 1 Content Panel 1 Content Panel 1 Content
</asp:Panel>
<asp:Panel ID="panelTwo" runat="server" class='slide'>
Panel 2 Content Panel 2 Content Panel 2 Content
Panel 2 Content Panel 2 Content Panel 2 Content
Panel 2 Content Panel 2 Content Panel 2 Content
Panel 2 Content Panel 2 Content Panel 2 Content
</asp:Panel>
<asp:Panel ID="panelThree" runat="server" class='slide'>
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
</asp:Panel>
<asp:Panel ID="panelFour" runat="server" class='slide'>
Panel 4 Content Panel 4 Content Panel 4 Content
Panel 4 Content Panel 4 Content Panel 4 Content
</asp:Panel>
<asp:Panel ID="panelFive" runat="server" class='slide'>
Panel 5 Content Panel 5 Content Panel 5 Content
</asp:Panel>
</div>
</form>
</body>
</html>
The first step is to cache the selector in a variable as shown below:
var $divSlide = $("div.slide");
The example then starts off by hiding all the panels except the first one using
$divSlide.hide().eq(0).show();
We then use the JavaScript setInterval() function to delay the execution of a function (panelSlider) for a specified time, in our case 3000 millisecond (3 seconds).
setInterval(panelSlider, 3000);
The advantage of a setInterval() function is that it continues to repeat the process of triggering the function at the specified interval, thereby giving it a loop effect.
Note: To pause the slideshow, use the clearInterval() function.
The number of panels is stored in a variable panelCnt
var panelCnt = $divSlide.length;
In the panelSlider() function, we use a simple expression ($divSlide.length++) % panelCnt that calculates the index to be supplied to the eq() selector and applies the fadeout/fadeIn() animations on the current panel. eq(0) refers to the first panel, eq(1) to the second and so on.
function panelSlider() {
$divSlide.eq(($divSlide.length++) % panelCnt)
.slideUp("slow", function() {
$divSlide.eq(($divSlide.length) % panelCnt)
.slideDown("slow");
}
The chart shown below helps you understand what happens at every loop
|
Loop Number
|
Value of $divSlide.length
|
Value of ($divSlide.length++) % panelCnt
|
|
1
|
5
|
5mod5 = 0
|
|
2
|
6
|
6mod5 = 1
|
|
3
|
7
|
7mod5 = 2
|
|
4
|
8
|
8mod5=3
|
|
5
|
9
|
9mod5=4
|
|
6
|
10
|
10mod5=0
|
|
and so on….
|
The entire source code of this article can be downloaded over here
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of
DotNetCurry,
DNC Magazine for Developers,
SQLServerCurry and
DevCurry. He has also authored a couple of books
51 Recipes using jQuery with ASP.NET Controls and
The Absolutely Awesome jQuery CookBook.
Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn