Create a SlideShow with ASP.NET Panels using jQuery

Posted by: Suprotim Agarwal , on 5/5/2010, in Category jQuery and ASP.NET
Views: 43409
Abstract: This article demonstrates how to display ASP.NET Panels one after the other, and after a fixed duration, like a slide show.
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.
This article is a chapter from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls. The chapter has been modified a little to publish it as an article.
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….
 
You can see a Live Demo
I hope you found this article useful and I thank you for viewing it. This article was taken from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls which contains similar recipes that you can use in your applications.
The entire source code of this article can be downloaded over here
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by google on Wednesday, May 5, 2010 8:38 PM
<a href="http://google.com">google</a> thanks
Comment posted by Pete on Tuesday, May 11, 2010 8:52 AM
By changing asp:Panel  to div,   this example would work in MVC as well as Webforms.
Comment posted by Fox on Tuesday, May 11, 2010 9:21 AM
Really fantastic, I Will buy your book when Im more experienced with asp.net and web development in general.
Comment posted by Fox on Tuesday, May 11, 2010 9:22 AM
@pete, it just plain html, it will work everywhere.
Comment posted by Alejandro on Wednesday, March 16, 2011 9:54 AM
thanks
Comment posted by KB on Thursday, November 15, 2012 7:23 PM
Thank you for the wonderful effects, they are sweet.
Comment posted by arvind singh on Monday, March 4, 2013 2:12 AM
Please give the full download path
Comment posted by Kevin on Sunday, July 7, 2013 11:53 PM
it's excellent . Thank You
Comment posted by net gen on Wednesday, July 31, 2013 8:07 AM
hi
check this library
http://codecanyon.net/item/simpleslidersnet-jquery-sliders-in-aspnet/5222359
thanks
Comment posted by Sayem on Wednesday, September 17, 2014 6:43 AM

Hi
Your Panel Slideshow is Excellent but It is not working in content page.
Would you please help me to solve this problem.
Thanks

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel