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

Leave a Reply