13 Super Useful jQuery Content Slider Scripts and Tutorials

By / Aug 24, 2009 / Tutorials
shares

You’ve probably noticed that a lot of websites lately have a featured area with content that slides or changes in some way. This is a great technique to show several pieces of content in a limited amount of space and a good way to engage the user. If you’ve been wondering how this is accomplished, here are 13 very useful tutorials and scripts that will help you create these types of effects using jQuery.

jQuery Tools Scrollable

jQuery Sliders

AnythingSlider jQuery Plugin

jQuery Sliders

Sliding Boxes and Captions with jQuery

jQuery Sliders

Making a Content Slider with jQuery UI

jQuery Sliders

Creating a Slick Auto-Playing Featured Content Slider

jQuery Sliders

Create Featured Content Slider Using jQuery UI

jQuery Sliders

jQuery.ScrollTo

jQuery Sliders

Moving Boxes

jQuery Sliders

ImageSwitch

jQuery Sliders

jCarousel

jQuery Sliders

Using the Wonderful jFlow Plugin

jQuery Sliders

Create Beautiful jQuery slider tutorial

jQuery Sliders

Step By Step To Create Content Slider using jFlow

jQuery Sliders

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

105 Comments

  1. Dicky
    August 24, 2009

    Hi Henry,
    Thanks for including my tutorial on this great post!

    Reply
  2. Joomla Outsource India
    August 24, 2009

    hey,

    its a great tutorial to work with.

    i love it.

    thanks for the sharing so nice jQuery slider scripts!

    Reply
  3. WPSMASH
    August 24, 2009

    Here are some great tutoriales, thank you for this great resources!

    Reply
  4. elcodigodebarras
    August 24, 2009

    Thanks for sharing this beautiful resources, I,m a regular visitor…

    Reply
  5. Sean Hurley
    August 24, 2009

    Great list here, and was actually looking for this for my new site. Wanted to use this effect for the main promo area.

    Reply
  6. joão
    August 24, 2009

    what a great article!

    Reply
  7. Samir
    August 27, 2009

    veeery nice, man… tks

    Reply
  8. web
    August 30, 2009

    I am bookmarking this page. thanks for the information

    Reply
  9. kafi
    August 30, 2009

    very nice one, really helpful. Keep going

    Reply
  10. Egypt Web Design
    September 2, 2009

    OMG!
    adorable collection … thank you bro :-)

    Reply
  11. Web Design Wakefield
    September 3, 2009

    Thanks for taking the time to compile this list. I have already added one of the sliders to my website and I am currently adding another on a clients site.

    Reply
  12. Sal
    September 6, 2009

    Hi, here’s another cool one: http://tympanus.net/codrops/2009/09/06/dynamically-changing-style-with-jquery/
    It uses the jquery ui slider to dinamically change the style of the page using ajax requests.

    Reply
  13. Shahriar Hyder
    October 12, 2009

    Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:

    http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

    Reply
  14. bujursangkar
    October 12, 2009

    yups…jquery, my love in developing website ^^. Thanks…

    Reply
  15. web suunnittelua
    October 22, 2009

    jQuery is the best, these are all pretty good slider scripts! And thanks Shahriar Hyder for posting the tips to improve the performance, very good material, thank you.

    Reply
  16. yudhistira
    November 3, 2009

    absolutely helpful. thanks mate :)

    Reply
  17. Vijendra Mishra
    November 17, 2009

    Thanks for sharing such a nice collection… this is really helpful.

    Reply
  18. Puneet Verma
    November 30, 2009

    I was looking for a content slider and reached the destination. Great … Bookmarked

    Reply
  19. Jack
    December 11, 2009

    It’s being very useful for me at the moment.

    Reply
  20. TheWebLeap
    December 22, 2009

    Hi, great slider! I didn’t see an answer to this in the comments-
    -is there anyway to make it continuous instead of rewinding back to the start? so f.e. 1,2,3,4,1,2… instead of passing by 3,2,1 to go back to slide 1.
    Thanks

    Read more: http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html#ixzz0aQGGr6KX

    Reply
  21. Joseph Griffin
    December 29, 2009

    Really nice ones. Thanks WDL :)

    Reply
  22. Jannis Gerlinger
    January 28, 2010

    Very great and fine inspiration !

    Thank you !

    Reply
  23. Troy
    February 5, 2010

    Thanks for the awesome plugins. This is exactly what I was looking for.

    Reply
  24. John
    February 10, 2010

    I love Jquery thank you so much for the list its much easier to see everything in pictures than searching on the jquery site!

    Reply
  25. Ebnat Syukur
    February 21, 2010

    i like JQuery. thanks i try one in blogger

    Reply
  26. Giovanni
    March 15, 2010

    thanks for this… really really great!!! I’m happy now :D :D after work i’ll get started making my site hehe :P

    Reply
  27. pixelmafia
    March 16, 2010

    thanx mate this is awesome……..

    Reply
  28. Myanmar Travel
    March 27, 2010

    These plugins are very useful. I used several jquery plugins in my new website http://myanmartravel.org.

    Reply
  29. Juancho
    March 29, 2010

    Thanks, i was really looking for this.. Fits for my next design project ;)

    Reply
  30. maximusweb
    April 14, 2010

    many thx for sharing… i was long time looking for something like that

    Reply
  31. Bhargav Anadkat
    April 26, 2010

    Ultimate jquery slider list. :)

    Reply
  32. Typo3 Agentur
    May 1, 2010

    Thats a great jquery slider list…
    Greetimgs from de

    Reply
  33. Erik
    May 8, 2010

    Nice collection. I really like Jquery and the way how one can write nice code for the websites.

    Keep adding good jquery links…

    Reply
  34. 55 Inspiring Examples of Slideshows in Web Design | Inspiration
    May 10, 2010

    [...] that make it relatively easy to add such interactions. A while back, we even posted a collection of jQuery slider scripts and tutorials to help you get started. So now we’re showing you 55 examples of [...]

    Reply
  35. sajan
    May 10, 2010

    Excellent collection very very useful. Thanks a lot , this will be useful not only for a newbie but also for an experienced web designer. Thanks a ton

    Reply
  36. Paul
    May 11, 2010

    Love the tutorials! Good Stuff!

    Reply
  37. taggart
    May 12, 2010

    SWEET ACTION these really are Super Useful jQuery Content Slider Scripts and Tutorials

    Reply
  38. Charles
    May 16, 2010

    Awesome selections! Just what I was looking for!

    Reply
  39. Ramalho
    May 19, 2010

    Hi WEB Family,

    Great collection & very useful.

    Thanks for sharing

    Reply
  40. Venkat
    May 26, 2010

    I’ve already used JFlow, JCarousel and ScrollTo (when looked for alternative to davidwalsh’s Smooth Scrool), But I was looking for *Making a Content Slider with jQuery UI* and got it! Thank you very much!!

    Reply
  41. OxigenesViz
    May 26, 2010

    Awesome scripts, thank you!

    Reply
  42. Freelance Web Designer Evan Skuthorpe
    June 2, 2010

    some great scripts here. thanks!

    Reply
  43. Hawk Designs
    June 18, 2010

    Great collection of scripts. Sliding boxes and featured content slider are my personal favs.

    Reply
  44. KiMdesign
    June 24, 2010

    Very useful!
    Thanks!

    Reply
  45. Euro
    July 5, 2010

    Nice set !

    Anything slider is my favourite, I use it every time.

    Reply
    • nilan
      August 19, 2010

      VERY VERY USEFUL

      Reply
  46. 10 jQuery Slider Techniques and Plugins | Tutorials
    July 16, 2010

    [...] = 'webdesignledger'; tweetmeme_service = 'bit.ly'; Share Last year we posted a collection of jQuery slider techniques and plugins. In a years time the trend of using these types of sliders or slideshows to [...]

    Reply
  47. karman
    August 14, 2010

    very useful…

    thank u….so much…..

    Reply
  48. Snooples
    August 15, 2010

    This is great stuff. I stumble onto this site by accident and it is a good thing I did.

    Reply
  49. Silverlight-but-also-JQuery-fan
    August 16, 2010

    Very good sliders! I very like the tutorial of the jFlow plugin.
    Thanks for this collection.

    Reply
  50. SEO Nottingham
    August 25, 2010

    Great stuff, I’m really getting into jquery at the moment – out of the above “ImageSwitch” is my fav!

    Reply
  51. hikarianna
    August 31, 2010

    absolutely helpful!!!
    thx :)

    Reply
  52. Developerholic
    September 15, 2010

    Thanks for the compilation! :D

    Reply
  53. Karmera
    September 16, 2010

    Great, thanks!

    Do you know which ones degrade gracefully with JS turned off?

    Reply
  54. Aravind
    September 21, 2010

    nice stuff……

    Thanks

    Reply
  55. SamsonDelila
    September 28, 2010

    Awesome …! Very very useful.. You’ve helped me save my time…

    Reply
  56. Cgbaran
    January 12, 2011

    Great roundup thanks

    Reply
  57. chris
    January 12, 2011

    Thanks for sharing great post.

    Reply
  58. Cameron
    January 27, 2011

    Nice collection of jQuery sliders – I know I’ll end up using one on my homepage!

    Reply
    • mikegulline
      September 1, 2011

      this one is perfect for homepages and portfolios.

      http://codecanyon.net/item/n3std-multislider/full_screen_preview/428506?ref=mikegulline

      it is an HTML content slider with nested sliders inside!!!!

      check it
      mg

      Reply
      • Joe
        February 22, 2012

        Hi Mike, at least you can indicate that you have made n3std mulitlider when promoting it. best

        Reply
  59. John Mellberg
    February 15, 2011

    Can jQuery sliders be used with a PHP site? Also can content within jQuery sliders still work for search engine optimization purposes?
    Thanks -John

    Reply
    • Geraldo Novais
      May 23, 2011

      Yes, You can use javascript with php and others languages like Python, Ruby, Perl,…
      Javascript is client side, no matter what server’s language you’re using.

      Some examples of sites that use php and javascript.

      http://www.geraldonovais.com.br/en/potfolio

      Reply
      • Geraldo Novais
        July 19, 2011

        To fix:

        the correct link is: http://www.geraldonovais.com.br/en/potfolio

        Reply
        • Geraldo Novais
          July 19, 2011

          To fix again:

          the correct link is: http://www.geraldonovais.com.br/en/portfolio

          portfolio and not potfolio (without ‘r’)

          Reply
  60. Banu
    March 15, 2011

    Thanks! nice slider!!!!!

    Reply
  61. Rick
    March 29, 2011

    Very Cool :)

    Reply
  62. hari prabhas
    March 30, 2011

    Nice Collection
    Thanks for sharing the great post.

    Reply
  63. rob
    April 5, 2011

    brill love jquery

    Reply
  64. Ahmed
    April 10, 2011

    nice roundup thanks for the info

    Reply
  65. Geraldo Novais
    May 23, 2011

    Very cool.
    Googlebot and me hate flash websites.
    Always, I try to use javascript.

    Reply
  66. Designer Renji
    May 27, 2011

    Thanks……useful post…..

    Reply
  67. Armen
    June 7, 2011

    Hey, what about my new slider based called jSwitch?

    http://creativator.net/projects/jswitch/

    Reply
  68. akeanant
    June 23, 2011

    Very cool.
    :)

    Reply
  69. Evan Skuthorpe
    July 21, 2011

    awesome, thank you.

    Reply
  70. ravi
    August 6, 2011

    hey great list of useful plugins…thank you for sharing

    Reply
  71. Ahsan Altaf
    August 7, 2011

    Thanks , i was looking for a decent slider :)

    Reply
  72. Jason
    August 12, 2011

    I’d like to suggest the addition of SlideDeck to this list.

    We developed it to be a flexible solution for designers and developers, as well as for non-technical clients to maintain (in the WordPress version). You can check it out at http://slidedeck.com.

    We’re also working to grow the community of people using it, and offering perks like job referrals and beta invitations/sneak peeks, so if you’re interested in joining, just contact me at pros@slidedeck.com.

    Reply
  73. Durgesh
    August 30, 2011

    Superb, very nice sliders.

    Reply
  74. Valter Henrique
    August 30, 2011

    Thank you, very useful, thanks.

    Reply
  75. Abdelkader Soudani
    September 30, 2011

    awesome, thank you.

    Reply
  76. ola
    October 3, 2011

    Interesting sliders even for a beginner like me!!!

    Reply
  77. Mark William
    November 1, 2011

    Thank you for sharing such wonderful scripts..Very helpful..

    Reply
  78. Carl Ji
    November 22, 2011

    i am trying to use jQuery slider on SharePoint 2007 site, anyone who had experience on that?

    Reply
  79. alovilla
    November 23, 2011

    thank you.I love jquery

    Reply
  80. jeuxdotnet
    November 23, 2011

    Can jQuery sliders be used with a PHP site? Also can content within jQuery sliders still work for search engine optimization purposes?
    Thanks -John

    Reply
  81. jeuxdotnet
    November 23, 2011

    Interesting sliders even for a beginner like me!!!

    Reply
  82. Web Development Company in Rajkot
    December 6, 2011

    Nice Work Done

    Reply
  83. Sandip
    December 21, 2011

    Superb, very nice sliders.

    Reply
  84. mangalore web design
    December 22, 2011

    Very nice slider jquery plugins, thanks for your effort and upload…

    Reply
  85. vivsupport
    January 6, 2012

    This is a very good collection of jQuery sliders, most of them work well with older Browers like IE6. There were a couple which dont display correctly on IE6.

    Reply
  86. طراحی سایت
    January 17, 2012

    great, thanks.

    Reply
  87. Hotel Istanbul
    March 2, 2012

    They are really good sliders. JQuery makes somethings very easy :) Thanks

    Reply
  88. Mikus
    March 18, 2012

    Hey, there is a new jquery slider: http://www.flowslider.com

    Looks very nice and works perfectly well for me! Developed couple of websites using it

    Reply
  89. Sean Peterson
    April 6, 2012

    Really enjoyed this list thanks!

    If anybody is interested, our new site http://www.loxiastudio.com/en/ has a total of 15 different flash/jQuery animations that are incredibly easy to integrate into a site.

    Once you have created an animation simply copy and paste the line of code that is generate into your site. It’s a simple as that.

    The tutorials are really simple to follow!

    Let us know what you think.

    Reply
  90. Umer Saeed
    May 11, 2012

    Likeable :)

    Reply
  91. Federica
    May 21, 2012

    Have a look also at μslider (http://muslider.musings.it) the lightest html5 jQuery content slider, very very easy to use and customize! Have a nice day :)

    Reply
  92. Nilambar
    June 5, 2012

    Nice collection. Thanks !!!

    Reply
  93. hari prabhas
    July 6, 2012

    very good collection.. thank you for sharing these nice sliders..

    Reply
  94. Arti
    August 6, 2012

    Very nice list specially the FitText Script.

    Reply
  95. Pouya
    September 14, 2012

    Very goooooooooooooooooooooooooooooooooooooooooood!
    Thank you :-D

    Reply
  96. Jason
    September 18, 2012

    I have problem with latest jQuery version, I was playing with featured slider and calls :

    $(document).ready(function(){
    $(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
    });

    how to fix with latest jQuery version?

    Reply
  97. Alicia
    October 15, 2012

    Wow, a good list of sliders. All are elegant, but my favorite has to be the one with thumbnails below. Classic, but for me it’s still the best.

    Reply
  98. Eclack Network
    October 26, 2012

    They are really nice. But I really need a simple content slider. These are too luxury

    Reply
  99. Kai Bartholome
    November 21, 2013

    Very nice collection of Jquery Content Sliders. But I think you missed the wow-Slider (jQuery). http://wowslider.com

    Reply

Leave a Reply