Animate Panning Slideshow with jQuery

Animate Panning Slideshow with jQuery

If there’s one thing that never seems to go out of style, it’s a good jQuery slideshow.

Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well.

In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

The Goal

Be the end of this tutorial, we’ll have a slideshow that transitions by changing the visible window. You will need to download two plugins for this tutorial: one for easing animations and one for timing slide changes. I’ve also packaged both in the tutorial source file below.

Panning Slideshow Result

Structuring the Slideshow

Step one is setting up the HTML structure for the slideshow.

As you may notice, we’re loading a few external JavaScript files into this page. After loading in the latest version of jQuery, we bring in the two plugins mentioned above. I’ve put both into a subfolder to keep things organized. The last JavaScript file loaded is “image-rotator.js”, and is where all of our custom jQuery code will go in a few steps.

Keeping with convention, we’ll contain the slideshow inside of an unordered list. This type of slideshow will require a helper “window” div in order to work correctly. Since we’re essentially looking at a specific corner of a larger image (simulated by the list) we will need to mask the areas outside of focus. This may sound a little complicated, but the image below should help you visualize:

Panning Slide Layout

Let’s get started by creating a new HTML file with the following code:

Style and Arrangement with CSS

The biggest change from typical slideshows is that the “#window” div is used to block out the full list images via overflow:hidden. Keep in mind that the grid of slideshow images is actually 1920px wide and 700px high. Since we’re only showing one slide at a time, the #window div cuts the visible area to 960px width and 350px height.

Copy the code below into your CSS file.

As with any CSS file, there is always opportunity to condense and streamline the styles involved. If you end up making a more efficient version of this, please share it with the rest of us!

Animating with jQuery

The primary role of jQuery in this slideshow is to adjust the coordinates of the list item image being shown. Our roadmap is below:
Panning Motion Diagram

With this in mind, let’s turn these motions into jQuery animations. Copy the code below into your project’s JavaScript file, and then meet us below for the script explanation.

This code starts out by declaring two variables. The first is current_panel, and will be used to keep track of the slideshow’s current location. The second is animation_duration and is used to affect all transitions in one place, rather than having to change times in four different locations. Where possible, it’s typically a good idea to condense attributes like this into variables for easy editing.

The timer function is based on our second plugin. Every 6000 milliseconds, the function encapsulated is fired. This function determines the current panel, and then animates the transition to the next sequential panel. Panel 4 automatically resets back to the start. Once the transition has been made, the current_panel variable is updated, and the timer is reset. Not bad!

What About Easing?

You may have noticed the easing attribute within the animate function. The easing plugin gives the transition a smooth elastic feel instead of a typical rigid motion. I’ve selected “easeOutBack” for the demo, but feel free to experiment with other easing options for your version.

Other Possibilities

Using this method, you could also setup one large slide instead of four individual ones. This would allow you to scan the contents of an oversized image in distinct zones, like a map.

Updating Delay

I started working on this slideshow before the delay function was added to the latest version of jQuery. While I haven’t explored it much yet, it seems like the timer plugin used here might be able to get replaced by it. If anyone chooses to explore this route, be sure to let us know what you come up with!

Have we missed anything/made any errors? Are there any steps that need further explanation? Let us know in the comments and we’ll try to sort it out!

The pictures of zoo animals used in this tutorial were all found via Flickr. Individual photo credits: Bald Eagle / Tiger / Panda / Macaw

Posted Thursday, February 11th, 2010 · Back to Top

SPONSOR

Add Comment

202 Comments 435 Mentions

  1. Design Informer Author Editor

    Nice tutorial Zach. I’m still trying to learn jQuery and simple tutorials like these definitely help. Besides, I really like this idea with one big image. I can already think of some creative stuff that I can do with it. Thanks!

    ·

  2. Kawsar Ali Author Editor

    Really neat Zach. This will be useful for any kind for websites.

    ·

  3. Russell Bishop Author Editor

    Nice end product here, but I can’t help but think that adding in the capability for crosslinking would be a little more impressive (ie. ability for non-linear movement between slides).

    ·

  4. Ward Author Editor

    Thanks for this tutorial! It’s been very helpful.

    ·

  5. Brian Jones Author Editor

    Very nice effect – thank you for posting this tutorial. I am a big fan of jQuery!

    ·

  6. Nick Parsons Author Editor

    Awesome tut, Zach! Very good explanation, and neat idea!

    You’ve got me thinking: wouldn’t it be neat to make it more flexible so that you could add additional images and change the grid size without having to add additional case statments? I don’t think that would be very hard at all, and might add a lot to the usefulness of the script. The code and explanation I’m thinking of might be kind of hard to fit here, so would you mind if I posted the modified script and explanation on my blog? I’d give you full credit of course :)

    Let me know if that would be acceptable!

    ·

    • millerpages Author Editor

      Excellent tutorial. Nice transitions. I now have it working on more than 4 images and tested on all browsers. Excellent for site banners.

      ·

  7. Matthew Kammerer Author Editor

    This is excellent, great idea. Thanks for sharing :).

    ·

  8. ariauakbar Author Editor

    this is great! thanks! :)

    ·

  9. Codesquid Author Editor

    Wow, this creates a really nice effect! Thanks for taking the time to share this and explain how to do it!

    ·

  10. Maicon Sobczak Author Editor

    Great idea! Simple and efficient.

    ·

  11. Veeru Author Editor

    Thanks alot for sharing this tutorial.I’m thinking on adding captions (on the images with opacity) at bottom of every image.Can you help me out with that?

    Thanks,

    ·

  12. Offset Printing Author Editor

    This tutorial is a great roadmap, I like the way you broke it down into manageable steps, and also touched on the other possibilities. Thanks Zach.

    ·

  13. gonzi Author Editor

    thanks you :)

    ·

  14. Rams Author Editor

    o this is WICKED, we need more jQ tuts like this man.
    Keep it up.. im a total noob and am trying to add more pics instead of 4, this will keep me busy, thanks again cheers from Morocco.

    ·

  15. mahmoud kamal Author Editor

    good Job ;)

    ·

  16. Corey Author Editor

    What would be easier: Implementing controls (next, prev) in this script or adding the easing plugin to my custom jflow slideshow?

    ·

  17. Peter Author Editor

    It would be amazing if you could control the slides/pics with prev/next buttons…….

    ·

  18. Arun Sengupta Author Editor

    well i just wanted some automatic carousal effect but when i saw this ,i thought this looks simple and different … and after when i used it … i found quite impressive coz it was very easy to use and very clean in code of the css and javascript , atleast for me :)

    thanks a lot

    best wishes for ur future work and more :)

    cheers !!! :)

    ·

  19. Chimera Studios web design Author Editor

    Amazing designs, keep up the good work!

    ·

  20. Pixel Air Web Design Cheshire Author Editor

    One of the best slider jquery tutorials i’ve seen. Awesome stuff.

    ·

  21. Rahul Joshi Author Editor

    Hey! Nice tutorial. But I am facing problem implementing it in IE7. Any idea. All the images come one after another instead of just showing one at a time.

    ·

    • Zach Dunn Author Editor

      I’m a little behind on comments here. Let’s fix that with some rapid-fire responses:

      @Nick

      You are more than welcome to make (and share) iterations of this tutorial. That’s the cornerstone of outstanding communities.

      @Veeru

      That falls outside the goals of this tutorials, but you should be able to do that by floating a separate div inside each slide. Transparency can be achieved using either the RGBa CSS spec or PNG backgrounds.

      @Corey

      Creating next/previous links would actually be relatively simple. You’d just have to include click events instead of timers in the jQuery file. All of the other code should stay the same.

      @Rahul

      I’m having a hard time visualizing the error you’re encountering. Are the images stacking on top of each other?

      Also thank you to everyone who found this useful! Glad to know these tutorials get put to practical application.

      ·

  22. Rahul Joshi Author Editor

    Hi Zach,
    Here is the link to the live HTML page: http://rjdesignz.com/Demos/test/ I face stacking problem in IE7

    ·

  23. Rakesh Solanki Author Editor

    I was little confuse about jquery but you cleared, thanks for this lovely article.

    ·

  24. Jauhari Author Editor

    Wonderful tricks… I want tried it on my own site some time…

    ·

  25. Maor Author Editor

    Cool plugin!
    I’ve just used it now and added a thichbox link for each picture to build up to the upcoming site http://www.route66.co.il

    ·

  26. Catalin Cimpanu Author Editor

    What is the license for this?

    ·

  27. Zach Dunn Author Editor

    @Catalin

    You’re free to use this however you please, we just ask that you keep any attribution commented in the code in place. The closest official license is:

    http://creativecommons.org/licenses/by/3.0/

    ·

  28. amjad Author Editor

    hey really amazing tutorial brother nd cool plugins

    can u please tell me how to add more images on this slide ?? cuz there are just four images ?

    ·

  29. mcd Author Editor

    Thanks for the great tutorial! I too would like to see this demo tweaked so more images can be added easily.

    ·

  30. builder Author Editor

    Great tutorial.
    Thanks!

    ·

  31. Abdel Author Editor

    Thanks for this great tutorial. Really simple and the final outcome is superb!

    ·

  32. Aravind Author Editor

    This is really nice effect…..

    I liked that…

    Thanks,

    ·

  33. Andreas koutsoukos Author Editor

    Hi, nice tutorial.
    I have question about multiple slideshow use.
    So i try to but 2 slideshow list windows in header but the other one just work, so how and is it possible to make multi slideshow?

    ·

  34. kamalino Author Editor

    this Awesome, I was using Flash for fullscreen animation.
    I am going to use this.

    @Abdel, nice to see you in buildinternet.com

    ·

  35. shevaa|webdesignersblog Author Editor

    Hmm pretty cool slideshow effect… nice man

    ·

  36. Alex Author Editor

    Hi !
    So cool this tutorial… See integration on my e-commerce website.

    To make it a little bit complicated, how put 4 images more ? (8 in total)
    What are changes I have to implement to “image-rotator.js” ? … I don’t know coding… :/

    thanks

    Alex

    ·

  37. lida Author Editor

    It would be amazing if you could control the slides/pics with prev/next buttons…….

    ·

  38. Xcellence IT Author Editor

    hey, great idea, I can use it at many places.. its much simple.

    Thanks for sharing this great jquery slide show technique with us.

    Thanks.

    ·

  39. Gögüs Büyütücü Author Editor

    Göğüs Büyütücü
    Göğüs büyütücü ürünler, göğüs büyütme hapı ve göğüs büyütme jeli satis ve siparis sitesi.
    gogus,breast,gogus buyutucu,2009,news

    ·

  40. Odelon Author Editor

    is very nice!! ;)

    ·

  41. wynajem Author Editor

    Very nice;)

    ·

  42. Agon Author Editor

    Hi, i want to thank you for this tutorial, it was easy to understand and i’m gonna use it for featured project…thank again…

    ·

  43. Mark Empeynado Author Editor

    would it be possible to add more pictures?

    ·

  44. Mark Empeynado Author Editor

    as to my query, i was able to add 2 more pictures…. thanks for this..

    one more thing thou, is it possible to adopt the transition of this effect to the “supersized” effect, i mean the smoothness.

    ·

  45. Jezabel Author Editor

    Thanks for sharing this nice tutorial :P

    ·

  46. L1 Author Editor

    Amazing, but how would one resize the slideshow? I wanted it to be 940px wide and 300px tall. I changed this in the css, but now 3/4 images don’t appear. I can’t link to an online page because it’s on localhost.

    ·

  47. L1 Author Editor

    Ok I managed to resize it, but now I’m having issues gettning the “content” (the box below the pictures) to animate as well, I’m using wordpress so have managed to implement the images using customfields.

    Here is the PHP file on Pastebin http://pastebin.com/dkFtXnF7

    But I can’t get the section below the slideshow to animate as well.

    ·

  48. Web Design Norwich Author Editor

    this is awsome, will use this thanks!

    ·

  49. Attis Author Editor

    Hi! It’s a very cool slideshow but how can i give a link for the images? I tried this:

    <a href="#"

    It works under Firefox but not in IE!

    ·

  50. Web Dizajn Author Editor

    Super Cool! THX!

    ·

  51. Ibrahim Author Editor

    Excellent; I will certainly give it a try. Thank you,

    ·

  52. volkan Author Editor

    great job !!

    ·

  53. va Infotech Author Editor

    very usefull for me

    I am Website Designer in india

    ·

  54. pradeep Author Editor

    How i can add more images in slideshow? Is there any limitation

    ·

  55. Index Web Marketing – Montreal Author Editor

    Not too shabby!

    Will share with some friends :D

    ·

  56. Health Angels Author Editor

    Great tutorial! Really a good script you are using. thanks for putting together this nice tutorial. I think this is the best site for learning php… Thanks for a great help!

    ·

  57. Shehroz Designer Author Editor

    nice thanks for sharing this toturial…

    ·

  58. Dilip Author Editor

    Nice clean coding !

    ·

  59. soma Author Editor

    hey really amazing tutorial brother nd cool plugins

    can u please tell me how to add more images on this slide ??

    ·

  60. vista-progs.blogspot.com Author Editor

    Thanks a lot for this marvelous tutorial bro
    : )

    ·

  61. Natura Cosmeticos Author Editor

    Muy buen Jquery!!! voy a untilizarlo en mi sitio!

    ·

  62. Mike Tyson Author Editor

    Great blog! Thanks for sharing this as this will come in useful.

    ·

  63. Jose Carlos Author Editor

    Great blog!
    please tell me how to add more images on this slide.

    ·

  64. Vicky Author Editor

    Hi,
    I have followed the tutorial; There are two folders “jquery.easing.1.3.js” and “jquery.timer.js” inside “js” folder. I have 4 images in my images folder. The problem is that when I preview my file, I can see only the first two images in the slideshow. Please advise why the other two images do not show up. What I am doing wrong here?
    Thank you
    Vicky

    ·

    • Zach Dunn Author Editor

      Without seeing your code, I can’t really make a suggestion. Post a link?

      ·

      • Alex Author Editor

        http://pastebin.com/T0kVPhdL – image-rotator.js
        http://pastebin.com/ZNYLHLPu – HTML
        http://pastebin.com/t8ayk144 – CSS

        Hey Zach.

        I have exactly the same problem as Vicky, and i can’t seem to figure out whats going on. above are the links to the code. I have definitely included all of the scripts in the Document head.

        It slides right to the second picture and then freezes there and doesnt continue or reset until you refresh the browser, then it does the same.

        Any advice? Hope this helps Vicky too.

        Peace

        ·

      • Nara Author Editor

        Same problem too. I tried with three photos but I don’t think it’s wrong.

        ·

    • Alex Author Editor

      im getting the same thing… weird!

      any advice would be great if anyone has had this issue. in the meantime i will upload the code so someone can have a nose and see if they can spot it.

      thanks

      ·

  65. Incredimail Author Editor

    It is amazing article which gives me information about Animate Panning Slideshow with jQuery.

    ·

  66. Brahmaji Author Editor

    Nice Article..Thanks a lot..!!!

    ·

  67. ABDUL JANOO Author Editor

    aha! what a good tutorials…………….awesome dude

    ·

  68. Renato Author Editor

    Hey’ how to add more than what 4 photos to slide? ^^

    ·

  69. sauna Author Editor

    yeah man!! ..How add more than 4 photos?? =S

    ·

  70. bellahsen Author Editor

    bonjour a tous
    voila mon site est sous xoops et je voudrai incorporer un slide pour mes articles.
    je ne comprend pas trop bien comment procéder,si vous voulez bien m’aider ça serai très gentil de votre part.

    ·

  71. insurenow4less Author Editor

    hey this was a great post. I really liked what you had to say
    That was pretty good information. Wonderful to read your post
    You rock it up and keep rocking. You are a techie guy for sure. I love to read tech stuffs.

    Auto Insurance

    ·

  72. Cgbaran Author Editor

    Great tutorial thankss

    ·

  73. web tasarım fiyatları Author Editor

    Great idea! Simple .Thanks

    ·

  74. Bali Escort Author Editor

    Great totorial…

    ·

  75. Daniele Peri Author Editor

    Hi. How can i add more than 4 photos? Thank’s

    ·

  76. sameer Author Editor

    hi.

    how can i create on rollover button text will be change on right side
    same example: http://www.microsoft.com
    plz check this site n plz help me for solving this prblem

    ·

  77. Channel 6 ACai Berry News Author Editor

    “Animate Panning Slideshow with jQuery”

    Thank you for another essential article. Where else could anyone get that kind of information in such a complete way of writing? I have a presentation incoming week, and I am on the lookout for such information.

    Channel 6 ACai Berry News

    ·

  78. Joe Asmar Author Editor

    I am using this one in one of my upcoming products.

    Thanks for sharing

    ·

    • carpool canada Author Editor

      I have used it, let’s see if people like it.

      ·

  79. Steve Author Editor

    Great post. But I wonder if the texts below the image (div) can also be changed?

    ·

  80. Saurabh Gupta Author Editor

    Nice !! Thnxx…. guys..!! u have done an extra ordinary work…on the web…

    ·

  81. yassine Author Editor

    merci pour cette exemple

    ·

  82. tasarhane Author Editor

    nice work.. thanks

    ·

  83. iraq Author Editor

    thank you it’s vrey uesful

    ·

  84. sharath Author Editor

    hey i tried the same thing… i mean i used the same code and implemented it
    but it does work properly!
    special easing effect doesnt work at all

    ·

  85. Earn money Author Editor

    Nice work. thanks

    ·

  86. Natura Cosmeticos Author Editor

    It would be interesting to present source codes for effects on facebook pages! I don’t know if it is possible.

    ·

  87. cheap jewelry online Author Editor

    IT IS NICe and smiple,thank you for the cute article.P)

    ·

  88. tendonitis exercise Author Editor

    Thanks very a lot for this flawless publish;that is the phrases that retains me on observe via out the day. I have been wanting around in your website after I heard about them from a buddy and was thrilled when I was capable of finding it after searching for lengthy time. Being a avid blogger, I’m glad to see others taking initivative and contributing to the community. Simply wanted to comment to point out my appreciation in your website as it is very difficult to do, and plenty of writers don’t get credit score they deserve. I’m sure I’ll visit once more and can spread the phrase to my friends.

    ·

  89. Madhawa Author Editor

    Nise slide show

    ·

  90. alex Author Editor

    Hi Zach,

    If you wanted it to just keep looping in a circle instead of crossing back over the images how would you do this?

    I’ve made it so it slides in a straight line across to the left and when it gets to the last image it slides all the way across them all to the beginning and i thought it could be nice if it carried on sliding as if it were an infinite loop?

    Thanks,

    Alex

    ·

  91. carpool canada Author Editor

    Good post, likes it…

    ·

  92. Websites Nepal Author Editor

    These type of posts are always welcoming and handful for us developers. Thanks for sharing and keep up the good work.

    ·

  93. web design uae Author Editor

    Animate Panning Slideshow with jQuery – Awesome work.Hope top work it out.

    ·

  94. Ann Author Editor

    I’m grateful for people like you on the net, however, this tutorial assumes I know where to put all this code. I’m helping a friend (who is even less savvy that I) put his website together. http://www.freedomradioepisodes.blogspot.com He has a series of films he wants highlighted on top. The slider in the existing template (Solid from http://www.premiumbloggertemplates.com/2011/04/solid-premium-blogger-template.html) IS NOT WORKING! So you can’t imagine how thrilled I was to see yours with coding! But because I’m not a web designer and neither of us have a budget for one, I have no clue as to where all this stuff goes. (trust me, I tried, I put everything in front of but that wasn’t a good idea). HELP! I have no more hair left!

    ·

  95. Cheap Oakley Author Editor

    straight line across to the left and when it gets to the last image it slides all the way across them all to the beginning and i thought it could be nice if it carried on sliding as if it were an infinite loop?

    ·

  96. Dortcelik Cocuk Hastanesi Online Randevu Alma Author Editor

    Thanks for sharing and keep up the good work. That is a great article.

    ·

  97. Gemlik Devlet Hastanesi Randevu Alma Author Editor

    I am not sure whether it is possible or not but It would be interesting to present source codes for effects on facebook pages.

    ·

  98. Web Development Author Editor

    Very nice slide show. This was very useful as I was looking for a image slider for my new website. Thanks for sharing it.

    ·

  99. طراحی سایت Author Editor

    Thanks for this Slideshow. It’s very useful and beautiful
    good luck.

    ·

  100. Guillermo Author Editor

    Nice slideshow.
    However, when I customized it for a recent project, the images inside the window seem to be off the margins by about 30x on the left and 10px on the top. the animation works and I have all my images in the slideshow but it is just off centered.

    Where could this problem be? I checked my CSS code and I changed the dimensions accordingly in the image-rotator.js. I also checked the other javascript files but I don’t see anything there that could be a problem.

    Please help. I would love to be able to use this.

    Guillermo

    ·

  101. Panagiotis Author Editor

    One of the best ss that. I can use Bravo.
    I’m trying to add photos but it doesen’ t work.
    I’m changing the following

    ——– image – rotator.js ————-

    $.timer(6000, function (timer) {
    //Determine the current location, and transition to next panel
    switch(current_panel){
    case 1:
    $(“#slideshow”).stop().animate({left: “-960px”, top: “0px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 2;
    break;
    case 2:
    $(“#slideshow”).stop().animate({left: “0px”, top: “-350px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 3;
    break;
    case 3:
    $(“#slideshow”).stop().animate({left: “-960px”, top: “-350px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 4;
    break;
    case 4:
    $(“#slideshow”).stop().animate({left: “0px”, top: “0px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 5;
    break;

    case 5:
    $(“#slideshow”).stop().animate({left: “-960px”, top: “-350px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 1;
    break;
    timer.reset(12000);
    }

    and

    ————– html code ———-

    can you helpme please.

    ·

  102. Panagiotis Author Editor

    ————– html code ———-

    ·

  103. Neeraj Author Editor

    You cannot add more than 4 images for this slider or is it possible?

    ·

  104. TARUN Author Editor

    you are just best

    ·

  105. Jarod Online Author Editor

    I saw a website use something similar to this technique; but instead of images, it used its content to move to other pages (well, that what I call them since it was just one page with multiple links that led to other parts of the entire page)

    ·

  106. Kevin Author Editor

    In case anyone is interested I made an alternate version that automates the transitions, but the drawback is you can only go in one direction.

    $(document).ready(function () {
    //This keeps track of the slideshow’s current location
    var index = 0;
    var item_height = 350;
    //Controlling the duration of animation by variable will simplify changes
    var animation_duration = 1500;
    var children = $(“#slideshow li”).length;

    $.timer(2000, function (timer) {
    //Determine the current location, and transition to next panel
    var slide = (-(index * item_height)) + “px”;
    $(“#slideshow”).stop().animate({ left: “0px”, top: slide }, { easing: ‘easeOutBack’, duration: animation_duration });
    index++;
    if (index > children – 1) {
    index = 0;
    }
    });
    });

    ·

  107. Jacob Author Editor

    Did you ever get your IE7 issue figured out? I am having the same issue…

    ·

  108. Jacob Author Editor

    I figured out the IE7 issue. If you put in position:relative; in your css for #window that should fix the problem, at least it did for me.

    ·

  109. Rusya Author Editor

    Great job. thank you for sharing this with us.

    ·

  110. san Author Editor

    It is very nice slideshow.
    Anybody tell me how can I add more images to fullfill my requirements ?

    ·

  111. Kumar Author Editor

    very nice tutorial…thanks for the nice article

    ·

  112. David Proctor Author Editor

    Fantastic article that really helped me with some problems I’ve been having.
    Kevin’s alterations work well too. Thanks alot.

    ·

  113. Siddhartha Author Editor

    First of all this is an amazing slide show and I just loved it.

    I’m still in learning phase of JQuery and this slide has helped a lot in it.

    For the users seeking how to make the slide show working for more than 4 images here is the fix.

    image-rotator.js (try be below code in the file)

    $(document).ready(function(){

    //This keeps track of the slideshow’s current location
    var current_panel = 1;
    //Controlling the duration of animation by variable will simplify changes
    var animation_duration = 2500;

    $.timer(6000, function (timer) {
    //Determine the current location, and transition to next panel
    switch(current_panel){
    case 1:
    $(“#slideshow”).stop().animate({left: “-960px”, top: “0px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 2;
    break;
    case 2:
    $(“#slideshow”).stop().animate({left: “0px”, top: “-350px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 3;
    break;
    case 3:
    $(“#slideshow”).stop().animate({left: “-960px”, top: “-350px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 4;
    break;
    case 4:
    $(“#slideshow”).stop().animate({left: “0″, top: “-700px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 5;
    break;
    case 5:
    $(“#slideshow”).stop().animate({left: “-960px”, top: “-700px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 6;
    break;
    case 6:
    $(“#slideshow”).stop().animate({left: “0px”, top: “-1050px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 7;
    break;
    case 7:
    $(“#slideshow”).stop().animate({left: “-960px”, top: “-1050px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 8;
    break;
    case 8:
    $(“#slideshow”).stop().animate({left: “0px”, top: “0px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 1;
    break;
    timer.reset(12000);
    }
    });

    });

    ·

  114. iicocuk Author Editor

    not working on more than 4 images..

    ·

  115. Robin Keoshi Author Editor

    Hey i did enjoy your blog i think it was pretty informative . Let me know if you have any future updates thanks .

    ·

  116. Kambridge Author Editor

    This is great, it works with all browsers and versions. THANKS!!!!

    ·

  117. مسعود محمدی Author Editor

    طراحی سایت

    ·

  118. طراحی سایت Author Editor

    عالیه …

    ·

  119. texxs Author Editor

    Did I miss the link to js files needed for this to work? You mention in the first art of the article that the link is below, but I can’t find it…

    ·

  120. yukitaka kamata Author Editor

    Zach,
    you considered this system, I am very thankful.

    Since I thought that this motion was wonderful, I think that he would like to use a new site for construction.
    http://bit.ly/umkJ9a
    I have made so far.
    However, I have a motion to add.
    I want the picture to stop at the area, if it clicks a button. BTN-00~BTN-08
    I looked for the method which can perform button operation.
    I was not able to discover the method.
    If there are those who know the method of someone’s changing into button operation, please let me know.

    $(document).ready(function(){

    //This keeps track of the slideshow’s current location
    var current_panel = 1;
    //Controlling the duration of animation by variable will simplify changes
    var animation_duration = 2500;

    $.timer(6000, function (timer) {
    //Determine the current location, and transition to next panel
    switch(current_panel){
    case 1:
    $(“#slideshow”).stop().animate({left: “-1180px”, top: “0px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 6;
    break;
    case 6:
    $(“#slideshow”).stop().animate({left: “-870px”, top: “-420px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 10;
    break;
    case 10:
    $(“#slideshow”).stop().animate({left: “-870px”, top: “-780px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 22;
    break;
    case 22:
    $(“#slideshow”).stop().animate({left: “-623px”, top: “-700px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 16;
    break;
    case 16:
    $(“#slideshow”).stop().animate({left: “-427px”, top: “-780px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 21;
    break;
    case 21:
    $(“#slideshow”).stop().animate({left: “-157px”, top: “-780px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 20;
    break;
    case 20:
    $(“#slideshow”).stop().animate({left: “-157px”, top: “-980px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 26;
    break;
    case 26:
    $(“#slideshow”).stop().animate({left: “0px”, top: “-980px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 25;
    break;
    case 25:
    $(“#slideshow”).stop().animate({left: “0px”, top: “0px”}, {easing: ‘easeOutBack’, duration: animation_duration});
    current_panel = 1;
    break;
    timer.reset(12000);
    }
    });

    });

    ·

  121. Photofan Author Editor

    Nice example, works well in Chrome too.

    ·

  122. admirals cove Author Editor

    I like this slider, but did not see how you could add text to the box. I need that for seo reasons as well as a better user experience.

    ·

  123. PATRICE Author Editor

    Zach,

    Thank you for your nice tutorial, however i would like to ask if you can show me how those photos can be generated without putting each one’s link. It means by putting a query that will list them from SQL table automatically by using PHP.

    ·

  124. طراحی سایت و سئو Author Editor

    thats great tnks

    ·

  125. rury Author Editor

    Hi Zach, thank you very much for the tutorial and the code. I have tried it and it works great!, however, I’d like to ask you about the time it takes to launch the slide effect. Is it possible to make it “play” once the site has loaded, or, let’s say, two or five seconds after the site has been fully loaded? It seems the effect takes some time to begin and I’d like it to show the pictures rather quickly. Thanks for your reply! (ps: I’m a new in jquery coding)

    ·

  126. ill501 Author Editor

    Sweet slide. I was able to implement it with minimal alterations. I was wondering where I could force my images to scale to my css sizing. I’m currently required to touch both my css and js files or resize my images to make the effect work correctly.

    ·

  127. Jesse Author Editor

    Nice script! seems like the first slide takes 2x the timer duration before it starts, and then the other slides rotate normally… any way to fix that?

    ·

    • Jesse Author Editor

      ah, looks like since the current_panel was set to 1, it was repeating the first one (hence the double time), so I put the current_panel to 0 (not sure if that is nec.) and then put in a “default:” below case 2. seems to be working.

      ·

  128. Diana Author Editor

    This worked very well for me. I had a few issues, but got some help to work through the issues. Thanks.

    ·

  129. Joseph Buarao Author Editor

    It works good in FF, Chrome and IE8 but I got a few bugs in ie7 I don’t know why? could you help me guys..

    ·

  130. pikasso Author Editor

    super – senk………..

    ·

  131. Vijay Author Editor

    Thanks for your nice tutorial

    ·

  132. skandal Author Editor

    I like this.. this is so good

    ·

  133. maurohead Author Editor

    It would be amazing if you could control the slides/pics with prev/next buttons…….

    ·

  134. MainWall Author Editor

    It works good in FF, Chrome and IE8 but I got a few bugs in ie7 I don’t know why? could you help me guys.. HD Wallpaper

    ·

  135. العاب سيارات Author Editor

    When I read your blog post, Hopefully it doesnt disappoint me as much as this place. After all, Yes, it was my option to read, however i actually thought youd have something interesting to express. All I hear is a variety of whining about something you could fix should you werent too busy trying to find attention.

    ·

  136. web design nepal Author Editor

    It is a nice post it can help people like me who are just a toddlers around the web. Thanks for the share..

    ·

  137. Cristy Gordy Author Editor

    The Zune concentrates on being a Portable Media Player. Not a web browser. Not a game machine. Maybe in the future it’ll do even better in those areas, but for now it’s a fantastic way to organize and listen to your music and videos, and is without peer in that regard. The iPod’s strengths are its web browsing and apps. If those sound more compelling, perhaps it is your best choice.

    ·

  138. lv wallet Author Editor

    If you are looking for something like that then louis vuitton must be your bet.

    ·

  139. chanel uk 2012 Author Editor

    The actual chanel bags price trademarks as well as quilting should fall into line.

    ·

  140. coach shoes Author Editor

    The top “in coach outlet store will be the Mia Natural leather Satchel– lustrous, prolonged band, along with foot to stop scrubbing.

    ·

  141. Issac Maez Author Editor

    I simply want to tell you that I am very new to weblog and seriously enjoyed you’re web page. Likely I’m likely to bookmark your blog post . You surely come with wonderful posts. Cheers for sharing your website page.

    ·

  142. hguhf Author Editor

    Great morning, could possibly be the following is towards situation merely well, i%u2019ve become executing study concerning your webpage which%u2019s why it’s obviously pro. I include been developing a fresh unique writings with your better half with attempting return glance good, each and every time as well as feel a remedy i%u2019ve damage it. Recommendations about how burdensome was generally known as the to successfully site? Properly any human being much for example me lacking an occurence make it happen, at the top that complete folks boost web should possess in connection with chewing completely up receiving that will done plus?

    ·

  143. Paid Directory List Author Editor

    We install in our Website, nice looking

    ·

  144. Player Grand Pianos Author Editor

    The ideas are compressed and it is straight towards the point. The approach on sharing the concepts which are primarily significant was done very well and that no need to have for hard terms to made use of for us to know the main points on Baby Grand Player Pianos you wish to conceive.

    ·

  145. arjun rk Author Editor

    pretty cool slideshow effect, thankss

    ·

  146. arjun rk Author Editor

    pretty cool slideshow effect

    ·

  147. Project Tracking Software Author Editor

    jquery always makes a animation drift free and it all depends on the kind of coding and specifications. Nice post and tutorial though.

    ·

  148. Stuart Rutter – Aura99 Author Editor

    Great article very useful example of a JQuery slider.

    ·

  149. karthick Author Editor

    Hi zach, Really nice work. now I learn about this slider and timer events.

    Thanks for classified these.

    ·

  150. Christa Scavotto Author Editor

    Hiya, I’m really delighted I experience organize this info. Today bloggers announce mere about hearsays plus I would like to found a person another very worthwhile internet site : right here

    ·

  151. 路人 Author Editor

    真心羡慕啊

    ·

  152. Swapan Author Editor

    I have got a clear idea with your awesome tutorials. I am jQuary Learner.

    ·

  153. Keikocanary Author Editor

    Nice motion and very useful !!

    Thanks for your simple & kindness tutorial!!!

    ·

  154. Ian Author Editor

    Sorry but, was not able to find a giant “DEMO” link at first glance on this page :/ Just friendly feedback. Thanks!

    ·

  155. Andrew Author Editor

    Cool! Can I put it on my site?!

    ·

  156. web filtering Author Editor

    Thanks thanks!

    ·

  157. good gaming laptops under 700 dollars Author Editor

    Great submit, very informative. I ponder why the other specialists of this sector don t understand this. You should proceed your writing. I m sure, you ve a huge readers base already!

    ·

  158. leurin Author Editor

    Hola !!!!!!!!!!!!

    Tengo Un Problema Co Eso De Cofigurar JavaScrip en el tema Tengo Una Opcion Para Colocar Una Galeria Extra Y Me Da Dos Opcciones Una Para Colocar Css y la Otra Para Html Pero Quiero colocarle el otro codigo y no se que hacer nesecito que me den una mano. Gracias

    ·

  159. dswww Author Editor

    great slider!!! good job!
    thanku you

    ·

  160. Ratih Nurmalasari Author Editor

    Hi Dude,
    It’s Fantastic! Thanks!

    ·

  161. برهان گرافیک Author Editor

    You’re truly a excellent webmaster. The web site loading pace is incredible. It sort of feels that you are doing any distinctive trick. In addition, The contents are masterwork. you have done a fantastic process on this topic!

    ·

  162. shobhit Author Editor

    Wow nice information you have here.

    ·

  163. kartesharj Author Editor

    Please send your samples to content.Thank

    ·

  164. sfa Author Editor

    i will use this slide show in my upcoming freelance project, thanks for share it

    ·

  165. sarami Author Editor

    Como puedo aumentar más imágenes

    ·

  166. Keya Directory Author Editor

    Hi this is a great bit of code. But is it possible to use this with sticky footer???

    I am using this with the sticky footer but I get a scroll bar for my large background image? so when I scroll down the footer does not stay at the bottom :(

    ·

  167. طراحی سایت Author Editor

    موافقم خیلی علیه

    ·

  168. سئو Author Editor

    جاداره از طرف تیم ایساتیس مجری طراحی و سئو وب سایت های ایران از شما تشکر کنم

    ·

  169. وی پی ان Author Editor

    عالی بود. امیدروارم وی پی ان بدردتون بخوره

    ·

  170. سئو Author Editor

    Thank you .

    ·

  171. Precious Fab-cast Pvt. Ltd Author Editor

    Thanks for this tutorial! It’s been very helpful.

    ·

  172. Precious Fab-cast Pvt. Ltd Author Editor

    Great job Done ! Thanks for sharing with us !

    ·

  173. Ampoule Filling Machines Author Editor

    Awesome! Thanks for Sharing…

    ·

  174. Hoi dap Author Editor

    so good! nice slider

    ·

  175. Souda Zhou Author Editor

    Great one! Thanks a lot!

    ·

  176. سئو Author Editor

    Awesome, Thanks for sharing with us !

    ·

  177. آیلتس Author Editor

    so good! nice slider

    ·

  178. Christoph Author Editor

    Really nice slider!
    But the problem with more than 4 images is keeping in touch…
    tried all the code for more than 3 hours now, tried to understand the function, amended so much functions with this ….
    Whatever I tried, only the first 4 images have been shown,

    What I am doing wrong?
    Can you update the exactly sample you given above, just for 8 images?
    Your code is too good for just only 4 images, but altough frustrating to update.
    It have to be easy to update this for 8 or more images ?!
    I cant get the solution, I am very thankful for your help….

    Best regards,
    Christoph

    ·

  179. Mandee Author Editor

    Wiw!

    Can figured it out now how to add more than 4 images :)

    Great I have now 8 images setup..

    Thank You..

    ·

  180. درب اتوماتیک Author Editor

    thanks admin niceeeeeeeeee

    ·

  181. BHARODIYAPRADIP Author Editor

    HAY

    ·

  182. طراحی سایت Author Editor

    tanx admin very good

    ·

  183. طراحی سایت Author Editor

    good, perfect

    ·

  184. طراحی سایت Author Editor

    good really

    ·

  185. web tasarım Author Editor

    is there any way to use as full width&height backround slider

    ·

  186. Sepatu Murah Author Editor

    Great job pall. Kepp posting. Love JQuery. Write less do more

    ·

  187. طراحی سایت Author Editor

    I love jQuery.

    ·

  188. طراحی سایت Author Editor

    tnx very usefull

    ·

  189. خرید vpn Author Editor

    good!

    ·

  190. طراحی سایت Author Editor

    thanks

    ·

  191. خرید vpn Author Editor

    tnx, really useful

    ·

  192. مهاجرت به کانادا Author Editor

    very good

    ·

  193. 風扇 Author Editor

    Hello! I just want to give a huge thumbs up for the good information you

    ·

 

Build Internet by One Mighty Roar. Since 2008.