30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars

May 7th, 2008

Every once in a while we like to focus on different design elements and how to use javascript and ajax to make them more interactive and more flexible to the user. In this article we’d like to present a list of over 30 hand-picked Sliders, Scrollers and scrollbar techniques you can use to achieve some special visual effects in your designs.

jQuery, Mootools, Prototype and are used in these examples, so every taste has its demos served.

You might be interested to check some of the designs that was mentioned in the posts below:


1) Slider– Horizontal or Vertical bar and slider.

2) Simple images slider to create Flickr-like slideshows– This step-by-step tutorial explains how to customize slideshow and use it in your web projects.

  • Download Tutorialfrom Here

3) Accessible slider– Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS.

4) Accessible Unobtrusive Slider Demo– This method offer full keyboard capabilities as using unobtrusive JavaScript which is a method that separates the JavaScript behavior from the page markup.

5) Slider– Degrade gracefully for browser without the needed DOM support with full mouse and keyboard support. Skinable using different CSS files.

6) Photo Slider Tutorial– Simple to use JavaScript slide show that scrolls thumbnails as smooth as Flash. Tutorial shows how to install and configure the code. The included example uses less than 10 lines of code.

7) Accessible News Slider– Accessible News Slider is a JavaScript plugin built for the jQuery library.

8 ) Yahoo! UI Library: Slider– The Slider component is a UI control that enables the user to adjust values in a finite range along one or two axes.

9) Fireworks.js– Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it’s a fireworks effect someone could theoretically use on their site.

10) Slider Gallery– A similar effect used to showcase the products on the Apple web site. This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.

11) 2J News Slider – Joomla Ajax Slider– This is an eye-catching news slider that bring in evidence your content.

12) Inline Range Slider

13) Ajax Image Sliders Part 2: Intervals with On Demand

14) Multiple Sliders in one page

15) Slider Using PHP, Ajax And Javascript– A slider script implemened in Ajax with PHP.

16) Coda-Slider– Amazing jQuery Coda-Slider can be used for Nice, slick content presentation.

17) jQuery Multimedia Portfolio– This plugin for jQuery will automatically detect the extension of each media and apply the adapted player. with a nice slider to move through the files.


18)Ultimate JavaScript Scroller and Slider– This versatile and lightweight JavaScript makes it easy to scroll text blocks, create slideshows, slide between content, create tickers and more.

19) df Javascript Smooth Scroll– A super small Smooth Scrolling Javascript. This script is too simple to understand and use. Nothing but playing with Anchor Tags. Include the Javascript and you are set to smoooooooooth scroll.

20) jQuery.SerialScroll– This plugin allows you to easily animate any series of elements, by sequentially scrolling them. You can use it as a section slider, text scroller, slideshows, and news ticker.

22) Easy Scroll: Accessible Content Scroller– Easy Scroll is standalone, lightweight script that is very easily applicable developed by Alen Grakalic.

21) Scrolling Div Content with Graphical Scrollbars– Scroll div content vertically or horizontally, onmouseover, onmousedown, onmousewheel or with a gliding motion onclick. Graphical scrollbars and multiple instances supported. Scroll areas can be positioned absolute or relative. New content can be swapped in and updated via ajax. Many more features and extras.

22) Scrollable content – Display content in a confined area. Users can view the entire content via the custom scroll up/down images.

23) Pamoorama– Basically what it does is to show only a part of your fullsize image. The image can then be scrolled by moving the mouse over it. Pamoorama will also display a small thumbnail of your panorama with a small window/frame so you can see which part of the image is visible right now. Dragging this little window is also possible!

24) How To Unobtrusively Scroll A Div With Prototype & Scriptaculous– The goal of this example is to see if scrolling effects can be possible while retaining legacy compliance and insuring “bookmarkability”.

25) mooSlideBox 3– mooSlideBox v3 is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox.

26) jqGalScroll v2.1 (Photo Gallery)– jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

27) DHTML Scroller– This script can load a file into a div, and scroll it via simple function calls and a fully draggable and sizeable scrollbar. It’s small and quite fast to load its content.

Stunning Custom Scroll Bars

28)Mootools Styled Scrollbar– This is an example how to make your own styled scrollbar using Mootools

29) FleXcroll– Flexible and Accessible Custom Scroll Bars. A Cross Browser* and Standards Compliant Custom ScrollBar Script by Hesido.

30)Slider Demos– An extensive set of slider demos.

31)jsScrollbar– It’s hard to find a good javascript scroller, check this demos and your scrollbar issues will be solved.

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: , ,

86 comments for „30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars
  1. Brian on May 7th, 2008 at 5:31 pm

    Another great list from Noupe. Keep it up – these lists are really helpful and inspirational.

  2. K.K.Shankar on May 7th, 2008 at 10:58 pm

    Useful list in a time

  3. Liam on May 8th, 2008 at 4:50 am

    Sweet, very useful for future reference. Thanks for sharing.

  4. kerberoS on May 8th, 2008 at 7:42 am

    Smoothscroll effect using mootools:

    window.ondomready(function() {
    new smoothscroll ();


  5. on May 8th, 2008 at 9:33 am

    All this javasript are intresting, but isn’t it time to use the XForms W3C standard that has embeded slider.

  6. Siddharth on May 10th, 2008 at 9:43 am

    I am not typical web designer guy, but every time I visit your blog I am amazed to see your effort and time you spent for the quality and useful post. Nice tips..

  7. Leland on May 16th, 2008 at 7:03 am

    Honestly – this has to be one of the best design tut/reference sites I have ever run into on the web. Hats off to the man in charge. *and your site is well done.

  8. JSHAW on June 11th, 2008 at 1:35 pm

    thanks, this is going to be so helpful with my current project. Its a secret as of now but hopefully it will pop off. YEYE thanks for the sliders!

  9. Becky on July 2nd, 2008 at 2:48 pm

    Hey Everyone!! I am trying to use the CODA-Slider but my text is too long for the slide. Does anyone know how to see the text that does not fit within each slide? PLEASE HELP!!!
    Great posts. Thanks

  10. jinson on August 7th, 2008 at 6:00 am

    great works…….

  11. Ted on August 20th, 2008 at 10:44 am

    Fantastic list. I’m taking a few of these ideas for my next design project. Thanks for putting this together!

  12. Kelly on August 20th, 2008 at 11:22 am

    Hello, I was trying to use:


    It works nice as long as your page is blank, but if I add anything else to the page or try to customize it (ie: move scrollbar to right), it stops working? Any suggestions?

  13. bbEnthusion on September 5th, 2008 at 10:08 pm

    Some of the nicest cleanest designs i have ever done and will in the future contain javajax is what i like to call it, clean, tons of data, and pleasing to the eyes.

  14. EDevMachine on September 20th, 2008 at 12:53 am

    Most excellent list! Really! I’ll be saving this as good starting point for various projects!

    Keep up the good work!

  15. Vlady on September 25th, 2008 at 1:24 am

    hi everyone, this is a nice collection of the sliders
    and i like tis one “Slider- Horizontal or Vertical bar and slider”.

  16. HostPipe on October 9th, 2008 at 6:23 am

    A really great resource, many thanks. I actually opted for the Prototype Scroller, really easy to impliment and use. Many a happy customer now!

  17. ManForCharity on October 9th, 2008 at 10:23 pm

    Wow these are awesome links, this website and the contents are really inspiring me.

  18. Sameer on October 12th, 2008 at 10:24 pm

    hi, its really good link but when you check on mozila it doesn’t work. means when you click on the up/down arrow it works well, but mouse scroll doesn’t work.

    can anybody please fix this also for mozila.

  19. Sameer on October 12th, 2008 at 10:26 pm


    hey i m talking about jsScrollbar the last one.

    its really good link but when you check on mozila it doesn’t work. means when you click on the up/down arrow it works well, but mouse scroll doesn’t work.

    can anybody please fix this also for mozila.

    hope i’ll get positive response from you.

    • i-cute on August 16th, 2010 at 6:05 am

      ive tried it and it works fine in mozilla..

  20. Ali on November 8th, 2008 at 5:27 pm

    cool list. Thanks

  21. Navin on November 14th, 2008 at 3:49 am

    Its really cool n superb, many many thanx for sharing.

  22. M - O - H on November 18th, 2008 at 3:49 am

    jast wow !
    it’s very interested and so useful

  23. Rioserver on December 3rd, 2008 at 2:19 am

    Thanks for the links

  24. holodoc on December 3rd, 2008 at 2:34 pm

    The one numbered 1 (Slider) was the most promising actually but it has some nasty bugs like the onChange and onComplete events which are supposed to work differently but they don’t. There is actually no way to detect when the user released the mouse button after the slider has been dragged to the desired place :( It was the most promising but unfortunately the author must correct some serious flaws.

  25. Teknoloji on November 2nd, 2009 at 7:30 am

    Perfect arrticle, thanx

  26. Unni Krishnan on November 3rd, 2009 at 7:44 pm

    WOW..a great list…i will be definetly using any of these…prefering jQuery Multimedia Portfolio- r the News Slider…thanks for sharing the great list….keep up with these good posts…..thanks a lot..

  27. Jignesh Parmar on December 3rd, 2009 at 12:50 am

    Hi!!! This all stuffs r very very useful as a web designer we should learn all this stuff, how they build????

    But Really CooooooL

  28. desarrollo web on January 2nd, 2010 at 6:24 am

    Thanks a lot, very complete seletion.

    See ya,

  29. Mobi on February 2nd, 2010 at 12:59 am

    Cool I have found the happiness on your website !!

  30. Katie on March 9th, 2010 at 4:56 am

    I am looking for like photo gallery section for wordpress. Do you know any such plugin which does this?

    • Darshan on May 27th, 2010 at 3:27 am

      Nextgen Gallery plugin is best one.

  31. tukaram on March 18th, 2010 at 1:13 pm

    hey isnt there any tutorial that will teach me, hw to write the image slider,,,?

    please gimme the link…

  32. Boldis Media on March 23rd, 2010 at 9:48 am

    Great inline sliders and Pamoorama!

  33. pratham dutta on March 28th, 2010 at 12:03 am

    Hello I am a web designer I always search this type of tutorials its really helpful for me…………….thanks

  34. kityt on April 21st, 2010 at 10:48 pm

    nice list check the 3script demo iam using at my site clcik on my name

  35. movers on April 30th, 2010 at 4:22 am

    Worthy material. Has taken into consideration a lot of the useful. I wish successes I Can tell with confidence that the blog will be will replenish

  36. wanluqman on May 4th, 2010 at 1:58 am

    Useful resources for my quiz scripts. thanks

  37. Morteza Zandieh on May 23rd, 2010 at 10:25 pm

    o thanks they are very usable

  38. Suresh P on May 24th, 2010 at 8:34 am

    Do anyone know the plugin for horizontal smooth scroller? I found some plugins in jQuery but when we increase the speed of the scroller, it starts to flickering.

    Thanks in advance!

    Suresh P

  39. kerala on May 27th, 2010 at 11:44 pm

    thank you friend , now i am using 17 ‘th one one my website

  40. Website Montreal on June 1st, 2010 at 3:34 pm

    Thanks for this I used the number 20 for one of my customer and he was very happy :)

    The post is a great ressources of what is possible with js/css for my other sites. I just digg this site.

  41. piks on June 17th, 2010 at 5:08 pm

    thanks for this diverse and nice list. Saves me the time of developing and even looking for a nice slider because of this list

  42. i-cute on August 16th, 2010 at 6:02 am

    awesome post! i’ve tried 3 of ’em.

  43. sortir paris on September 8th, 2010 at 6:41 am

    Thanks, and qscroller also is a good tool but it works with mootool

  44. tuba on October 14th, 2010 at 5:34 pm

    very nice, jQuery.SerialScroll worked for me very well. thanks

  45. Donhasatrone on October 16th, 2010 at 1:52 pm

    Will consider implementing one of those to my website.

    great repository.

  46. Wozza on October 28th, 2010 at 12:49 pm

    Just started working on the jsscrollbar – a very nice collection of techniques folks, thanks v much for sharing them – cheers Wozza

  47. Adrian on November 2nd, 2010 at 1:04 am

    Number 22, “Scrollable content”, though very elegant, is marked for non commercial use. (With a very elegantly hidden alert box onpageload)

  48. Ruman on December 28th, 2010 at 6:22 am

    I couldn’t be able to find one good image slider like nivo slider. Nivo slider doesn’t work in ie6 could you plz if anyone knows the slider gallery the best one like nive but must work in ie6.


  49. Pinna Infotech on December 30th, 2010 at 3:52 pm

    Nice works with great presentations.


  50. webtrendset on January 4th, 2011 at 5:47 am

    very nice collections

  51. Anilkumardandu on January 8th, 2011 at 7:42 am

    very useful..superb…

  52. deepak sharma on January 22nd, 2011 at 4:52 pm

    very helpful thanks for sharing ………….

  53. Andy on January 25th, 2011 at 12:08 pm

    Check out this scrollbar jQuery plugin. Really simple to use. Replaces the built in ones with themable ones. Comes with iTunes and black themes:

  54. Atasözleri on January 28th, 2011 at 3:11 pm

    Thank you very much dude! Wonderful sliders! Thanks again!

  55. on January 31st, 2011 at 3:59 pm

    many thanks to you… nice article

  56. Yakup on February 10th, 2011 at 12:12 pm

    Excellent, thank you for posting these sliders. Bookmarked!

  57. Michael Freitag on February 14th, 2011 at 6:45 pm

    Klasse Auflistung! :-)

  58. Paul on February 18th, 2011 at 5:18 pm

    Here is another one JavaScript simple slider:

  59. Shemika Trollope on March 1st, 2011 at 3:17 pm

    Very good article. Beware of appearances, but I found this article excellent. This site is a real source of useful information. Thank you very much for the work provided. I hope you will continue long

  60. Richard on March 15th, 2011 at 3:03 pm

    Awesome list, found one thats just the ticket.


  61. Marcin on March 22nd, 2011 at 8:55 am

    Great list, especially positions with JQuerry.

  62. Gosip Artis on March 26th, 2011 at 5:01 am

    sorry but “No 7 Accessible News Slider- Accessible News Slider is a JavaScript plugin built for the jQuery library” is no longer there 404 error

  63. Cara Mia Ciasulli on May 17th, 2011 at 10:26 pm

    This is seriously one of the greatest, most useful posts (and prettiest sites) I’ve seen in a while. Thanks a lot!

  64. Fume hood on May 26th, 2011 at 8:25 am

    Exactly what I have been craving

    Thanks so much for this all in one place!
    I have viewed the videos and it is really great, It give me ideas on how to finish my graphic design courses.

    Many Thanks.

  65. tuba on June 27th, 2011 at 7:14 pm

    What a wonderful list! It seems one stop solution for js slider. Bookmarked the site, may be some can also take a look this :)

    Thank you for the list!

  66. Monjurul Hoque on June 28th, 2011 at 9:06 pm

    i used this script to many of my site and happy with this script. thanks

  67. kishore on June 30th, 2011 at 1:58 pm

    good scripts…thanks for sharing

  68. Donny on August 13th, 2011 at 7:22 am

    nice share, thanx a lot mate. i’ll use one of them in my site.

  69. kradelle on August 19th, 2011 at 8:02 am

    thanks for sharing.. :)

  70. Toko Bunga Alam on August 24th, 2011 at 12:51 am

    thanx boss…

  71. Sophie on August 26th, 2011 at 1:17 pm

    verry good ^_^

  72. Morgan FABRE on September 13th, 2011 at 12:18 am

    Thanks for the list. I’ll take a look on some of theses ones =’]

  73. Domain Murah on September 22nd, 2011 at 10:24 am

    nice, thanks for the article, I save this page.

  74. Toko Bunga on November 11th, 2011 at 4:16 am

    Very nice sliders! Thanks.

  75. alex on December 15th, 2011 at 6:32 pm

    thanks, very useful scrollers and scrollbars

  76. Hrishikesh Chaturvedi on April 2nd, 2012 at 9:42 am

    Very useful scrolls.
    and i used “Accessible Unobtrusive Slider” scroll.

    thanks a lot

  77. CodePsd on May 20th, 2012 at 5:39 pm

    If you don’t want to use Jquery UI, you can use our very simple slider that we use in our projects. Its only like 20 lines of code.

  78. Turkish on August 8th, 2012 at 2:38 pm

    Unavailable free download links.

  79. toko bunga on November 30th, 2012 at 1:10 am

    Thank you for posting these sliders, especially positions with JQuerry.

  80. toko bunga on December 7th, 2012 at 10:51 am

    Thank you very much, Wonderful sliders

  81. toko bunga on January 10th, 2013 at 5:27 pm

    Great list, especially positions with JQuerry

  82. fysisoft on January 15th, 2013 at 6:19 am

    thats a great article

  83. tenda jakarta on January 21st, 2013 at 9:03 am

    whether for 30 sliders can try all …… we try again … thanks for the info

  84. Nazmul Hoque on August 3rd, 2013 at 12:51 am

    These is a nice article. Download does not work tough…..

    Thanks for sharing.