5 Sliding Content Techniques, Examples & jQuery How to’s

August 12th, 2009

The more intuitive layout structure is designed, the better users can understand the content. Whatever content you have to present, you can present them in a more interactive & more responsive ways.

Today we would like to focus on sliding effects and how i can change the structure of a page in a truly unique and creative way. There are many transition effects that can be used to slide different contents, such as fading, horizontal sliding, vertical sliding, the list goes on. Try to pick the transition that best captures the style of your website.

In this article we’d like to present 5 smart techniques for sliding and scrolling content using the power of CSS and the beauty of jQuery.

– “Sliding Verticaly” with Button Controls

Share Point Artist has taken a truly unique approach to the “My Work” area. What they have created is an animated SlideShow showing their recent work with a nice hover effect for the “Previous” & the “Next” buttons.

The navigation options, the “Previous” & the “Next” buttons are slightly animated yet creating an appropriate atmosphere. Once one of these buttons is clicked, the content area slides vertically — showing the image of their recent work, with the description of each project in one <li> tag.

jQuery animation



The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some beatiful effects.

jQuery animation

View DemoDownload Files

– “Sliding Horizontally” with Button Controls

Over the last couple of years we have noticed a strong trend toward sliding horizontal panels or menus also known as Carousels. Creamy CSS uses a similar effect, once one of the navigation options at the left and right is clicked, a group of images in one <div> tag slides Horizontally.

jQuery animation


jCarousel (Riding carousels with jQuery) –

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

jQuery animation

View DemoDownload Files

Moving Boxes

The big difference in this slider is that there are buttons to change panels and the panels zoom in and out when user click on the buttons at the left and right.

jQuery animation

View DemoDownload Files

– Scrolling Content

It seems to have become a common practice to automatically scroll smoothly to any id or named anchor on the current page when clicking on a same-page link. For instance, CharlieGentle uses an interesting design approach to scroll smoothly to certain parts of the page.

Initially the visitors see only “Web” panel, when one of the menu buttons is clicked, further panels is displayed. The arrows at the right and left of the site always allows users to scroll to the next or previous panel.

jQuery animation

Another great example of smooth scrolling can be seen at DesigninSocial, when one of the menu buttons is clicked, different panel is displayed.

jQuery animation



Ariel Flesler has written an excellent ScrollTo plugin that lets you scroll with many configuration options to customize the animation and also the final position.

jQuery animation

View DemoDownload Files

MetaLabDesign uses another interesting approach to scroll smoothly in a visually-appealing manner. The advantage of using scrollable compared to “normal” browser scrolling is that you don’t see the browser’s default scrollbars, and you can perform scrolling in much more visually sophisticated ways.

jQuery animation



The purpose of this library is to make it extremely easy to add scrolling functionality to a website. The main design goals of this library are to provide visual customization functionality and programmability.

jQuery animation

View DemoDownload Files

– Sliding Boxes and Captions

yaypaul uses an interesting design approach to show the title of each project when the mouse is moved over each project image.

jQuery animation

Slice Machine has a great example of showing and hiding content by sliding boxes or panes on hover event.

jQuery animation


Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

Set up the default starting point for the caption box. If you want it fully hidden initially, you will want the distance from the top or left to match the height or width of the window (.boxgrid), depending on which direction it will be sliding. You can also have it partially visible initially, as .caption .boxcaption illustrates.

jQuery animation

View DemoDownload Files

– Sliding Panels

Atlanticbt does a great job of grouping different links in one organized section, appears with a nice slide effect.

jQuery animation


Sliding Login Panel built with jQuery

In this tutorial, we will see how to create a show/hide login/signup panel for your website using jQuery. A mootools version van be found here. Panel overlaps content instead of “pushing” it in a slicker way.

jQuery animation

View DemoDownload Files

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

96 comments for „5 Sliding Content Techniques, Examples & jQuery How to’s
  1. dlv on August 12th, 2009 at 5:38 am

    excellent post! i love “Share Point Artist”, “yaypaul” and “DesigninSocial”… they are great!
    Thanks for this writting, easy to read and really helpful !


  2. Stephen Bateman on August 12th, 2009 at 6:04 am

    Wow I would’ve loved this post yesterday while I dug around for sliding stuff :P but regardless of timing, the content is splendid.

  3. Charlotte on August 12th, 2009 at 12:49 pm

    Just getting into jquery at the moment, so this is great encouragement, thanks!

  4. Peter Lehto on August 12th, 2009 at 1:04 pm

    Great post!

    I’ve been getting into jquery more and more. Bookmarked!

  5. bineet chaubey on August 12th, 2009 at 1:16 pm

    amazing post .i appreciate for this great post .
    i am a beginner in jquery. and this time i am trying to learn this post is helpful for me .

    • ajeet on July 27th, 2011 at 7:57 am

      ya man this post is very useful

  6. Moto Equipement on August 12th, 2009 at 3:46 pm

    Very nice idea, i hope to have the time to introduce these techniques on my website. Jquery is so great

  7. Joh nThomas on August 12th, 2009 at 5:27 pm

    Wow, makes prefect sense to me dude!


  8. Ahmed on August 12th, 2009 at 7:22 pm

    i used slider panel before its nice but need some time to edit it to work in your site

    MetaLabDesign also have cool slider

  9. Kaan on August 12th, 2009 at 7:59 pm

    Really good list. Thanks

  10. dM on August 13th, 2009 at 12:41 am
  11. Hovsep S. on August 13th, 2009 at 1:27 am

    Good stuff guys, keep up the good work.

  12. Pelfusion on August 13th, 2009 at 1:47 am

    good work…thanks for sharing

  13. webmasterdubai on August 13th, 2009 at 11:09 am

    really nice and important post. all jquery sliding stuff under one umbrella

  14. ryan web pontefract on August 13th, 2009 at 6:48 pm

    Great list, I love that you actually take the time to compile this based on real world examples. I am definitley going to be using this!

  15. mamdouh on August 13th, 2009 at 9:17 pm

    thanks for that post

  16. Deanna on August 14th, 2009 at 2:36 am

    Love this list! Thank you! Anyone know if you can use jQuery for sliders with mouse control? Meaning, if I hover to the right it scrolls.

  17. Website Design Sydney on August 14th, 2009 at 1:54 pm

    Hey, Its really nice techniques for Sliding content. thanks for sharing..

  18. Piyush Agarwal on August 14th, 2009 at 2:53 pm

    Loved this post. It would prove very helpful.

  19. Alexandre Broggio ( Brasil ) on August 14th, 2009 at 6:58 pm

    Muito interessante obrigado

  20. skyred on August 14th, 2009 at 10:08 pm

    Great Tutorial!! I followed Sliding Boxes and Captions with jQuery tutorial and made this

  21. Joe Wolfe on August 14th, 2009 at 10:32 pm

    I could have used this article a few weeks ago when I was searching endlessly for the right sliding content code to use on my portfolio site. I ended up using a MooTools library over Jquery, but I like some of the things posted above a little better.

  22. gigi on August 15th, 2009 at 1:12 pm

    Fantastic work!
    It’s a great post but more important it’s very usefull!!!


  23. Yasmine on August 24th, 2009 at 10:18 pm

    Awesome, I love it
    Thanks for posting

  24. ebx on August 29th, 2009 at 10:52 pm

    super duper helpful……mooochas gracias!

  25. Himanshu on August 30th, 2009 at 11:26 pm

    Really very helpful article, it covers all the aspects of jQuery. Just going to have some try! Thanks.

  26. Satish Borkar on August 31st, 2009 at 12:04 pm

    nice collection

  27. Neel on September 18th, 2009 at 10:19 pm

    nice Article on jquery image slider.

  28. Chris Pierre on October 15th, 2009 at 9:49 pm

    This is article will Definitely be a bookmark, Thanks a lot!

  29. vincentlauv on November 19th, 2009 at 12:38 am

    thanks, this is very useful thanks anyway

  30. 3m masr on December 1st, 2009 at 7:44 pm

    very good … thank you

  31. anadikt on January 15th, 2010 at 12:03 pm

    thanks for that post

  32. daddy design on February 3rd, 2010 at 9:12 pm

    great article. I am going to test this out.. ty!

  33. Sofia on February 9th, 2010 at 12:17 pm

    Thanks a lot for the valuable information.

  34. Jane on March 7th, 2010 at 3:38 am

    Great Collection, thanks for sharing!

  35. Indialike on March 11th, 2010 at 10:27 pm

    Very nice and useful tutorials for web designers,
    Thanks for posting.

  36. Free Unique ArticlesFree Unique Articles on July 14th, 2010 at 11:54 pm

    I just googled to your blog in search of this. Really interesting stuff. Thanks

  37. Temizlik firmalar? on July 31st, 2010 at 2:24 am

    Very nice and useful tutorials for web designers,
    Thanks for posting

  38. iTechRoom on August 9th, 2010 at 2:35 am

    Very useful collection indeed, Thanks for sharing.

  39. David on August 13th, 2010 at 10:38 am

    Thanks, very useful

  40. Mubeen on August 15th, 2010 at 3:40 pm

    Great Post!

  41. mahaclip on August 16th, 2010 at 4:24 am

    Thanks, very useful this is it

  42. Murukesh K V on August 17th, 2010 at 9:18 pm

    Excellent collection and very helpful

  43. Simon on September 2nd, 2010 at 6:03 am

    thanks for the useful collection, i like your design! here you can find some examples for some other jquery sliders: (JS-code free for download)

  44. Kago Kagichiri on September 14th, 2010 at 1:42 am

    Excellent post.

  45. Brett Widmann on October 24th, 2010 at 4:14 am

    Thanks for such a great collection of tips and resources!

  46. warawat on November 6th, 2010 at 10:17 am

    thanks for the list! there’s some good ones

  47. Rali Madhu Sudhana Chary on December 7th, 2010 at 2:31 pm

    Amazing of collection, really i am wonder of this Good article.

  48. srikanth portal on December 21st, 2010 at 5:52 am

    Awesome collection..Thanks for the sharing..

  49. wallpapers on January 14th, 2011 at 12:55 am

    very great collection! thanks!:)
    happy new year!

  50. Kenia Braucks on January 16th, 2011 at 11:49 pm

    Intimately, the post is really the greatest on that worthw hile topic. I fit in with your conclusions and also definitely will eagerly look forward to your next updates. Simply saying thanks can not just be sufficient, for the amazing clarity in your writing. I definitely will directly grab your rss feed to stay abreast of any kind of updates. Pleasant work and also much success in your business endeavors!

  51. Mark Searle | Unicora on January 20th, 2011 at 9:42 pm

    Glad to see you have found some new and interesting sliders. A Google search for JQuery sliders will bring up pages of sites all will almost the same lists.

    Good job!

  52. rahil on January 26th, 2011 at 6:04 pm

    good work done useful every developer……

  53. mydesign on January 27th, 2011 at 10:11 am


  54. Santosh on February 12th, 2011 at 6:36 pm

    Awesome stuff. Please keep on sharing :)


  55. ?? on February 14th, 2011 at 1:03 pm


  56. Saurabh Gupta on March 15th, 2011 at 8:00 am

    Thanks..!! Nice work…

  57. aldo on March 22nd, 2011 at 9:59 pm

    some nice choices here!
    though, i am still looking for something specific i hope someone here can help me find =)
    i’m trying to find an image slider with mousewheel (or smoothscroll) option, that will allow me to hover into a large image (preview)
    major plus if it could also allow me to click into a lightbox

    that was a mouthful =)
    any help appreciated
    thanks ahead!!!

  58. Yuriy Z. on April 8th, 2011 at 11:07 pm

    Really diggin the CharlieGentle. Might do something similar to my portfolio/blog.

  59. Hemant on April 19th, 2011 at 6:53 am

    This is very helpful to me as fresher

  60. Lmax on April 20th, 2011 at 8:44 am

    fantastic !!! thanx a lot :*

  61. web design on April 20th, 2011 at 10:34 am

    some great ideas and inspiriting links !

  62. nilesh on May 12th, 2011 at 6:16 am

    Excellent list of all the sliders. Thanks for sharing.

  63. Designer Renji on May 27th, 2011 at 9:16 am

    Thanks……nice & helpful post…..

  64. axxxd on June 28th, 2011 at 8:10 am

    nyc 1 mate!

  65. anupal on July 11th, 2011 at 7:05 pm

    great nice … really awesome.thnxx

  66. Harsh on July 22nd, 2011 at 8:46 am

    Superb Post :) !

  67. Sunil Soundaraoandian on August 2nd, 2011 at 1:58 pm

    Excellent Post ! Thanks

  68. hari on August 18th, 2011 at 8:51 am

    hi,your article is nice,but i want to slide multiple category on one page with jquety,
    prev image1 image2 image 3 prev
    prev image1 image2 image 3 prev,
    if any one knows pls reply to

  69. Mike Failla Design on September 1st, 2011 at 6:11 pm

    This is some awesome information on jQuery plug-ins. I appreciate you taking the time to find a bunch of cool ones.

  70. Plugo on September 12th, 2011 at 6:58 pm

    Thank you so much for this collection.

  71. febina on September 14th, 2011 at 8:18 am

    This may also helpfull for web developers

  72. Amit on September 14th, 2011 at 9:52 am

    Very nice jquery

  73. leena on September 21st, 2011 at 7:55 am

    thanks for sharing this article ..

  74. alovilla on November 23rd, 2011 at 11:18 pm

    thank you. i used sliders. thank you very much

  75. sajid on January 5th, 2012 at 7:34 pm

    great Tools..

    thanks for sharing

  76. henry on February 17th, 2012 at 10:07 pm

    was looking for this…found so many scrollers thanks!

  77. tranh on March 6th, 2012 at 4:35 am

    cool but some examples got errors

  78. jayendra on March 12th, 2012 at 6:50 am

    Awesome Collection. Thanks to share this.

  79. Afrin on March 19th, 2012 at 8:06 am

    great and useful post :) thanks for sharing these :)

  80. Raleigh Web Design on March 25th, 2012 at 5:36 am

    Awesome …All Collections are so nice. I love Sliding Boxes and Captions

  81. Gvall on March 27th, 2012 at 7:11 pm

    exelent post…

  82. Scott on March 29th, 2012 at 9:56 pm

    FYI– Looks like creamycss goes to a link farm now.

  83. Edgars on April 8th, 2012 at 9:25 pm

    thanks for info!
    those sliding boxes, divs, even simplest hide/show div are excellent way how to put more content in few space. and not to mention looks modern and can add price when building websites for clients ;)

  84. Ankit on April 11th, 2012 at 12:10 pm

    Great Site – Great Stuffs of JS. I love this site. ;)

  85. sanjay on April 24th, 2012 at 2:08 pm

    Thanks friend.
    It help a lot and good effort.

  86. Abdul Qadir on May 22nd, 2012 at 11:30 am

    very much thanks

  87. tabam on May 23rd, 2012 at 2:17 am

    Is perfect! Thanks!

  88. RJ on May 26th, 2012 at 12:39 pm


    can any1 of help me for a auto content slider with next and previus button.
    Thanks in advance.

  89. Arbuz on June 3rd, 2012 at 3:22 am

    Thanks for sharing post.

  90. Ahmad on August 6th, 2012 at 1:49 am

    thank u :) nice collection

  91. Pieter Keuzenkamp on August 30th, 2012 at 9:21 pm

    Great post, very usefull collection jQuery sliding techniques. Tnx ;-)

  92. Ponderink on October 8th, 2012 at 9:53 am

    Thanks for the taking the time and putting this together, very handy. I’m a big jCarousel user! simplicity.

  93. pradeep parjapat on October 15th, 2012 at 11:57 am

    Thanks everyone for review..

  94. tsupaman on March 29th, 2013 at 9:45 am

    Thank you very much for all helpful my web.

  95. email addresses for sale on April 8th, 2013 at 8:28 pm

    […]The data mentioned in the post are a number of the most effective obtainable […]