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. hikarianna
    August 31, 2010

    absolutely helpful!!!
    thx :)

    Reply
  2. Developerholic
    September 15, 2010

    Thanks for the compilation! :D

    Reply
  3. Karmera
    September 16, 2010

    Great, thanks!

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

    Reply
  4. Aravind
    September 21, 2010

    nice stuff……

    Thanks

    Reply
  5. SamsonDelila
    September 28, 2010

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

    Reply
  6. Cgbaran
    January 12, 2011

    Great roundup thanks

    Reply
  7. chris
    January 12, 2011

    Thanks for sharing great post.

    Reply
  8. 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
  9. 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
  10. Banu
    March 15, 2011

    Thanks! nice slider!!!!!

    Reply
  11. Rick
    March 29, 2011

    Very Cool :)

    Reply
  12. hari prabhas
    March 30, 2011

    Nice Collection
    Thanks for sharing the great post.

    Reply
  13. rob
    April 5, 2011

    brill love jquery

    Reply
  14. Ahmed
    April 10, 2011

    nice roundup thanks for the info

    Reply
  15. Geraldo Novais
    May 23, 2011

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

    Reply
  16. Designer Renji
    May 27, 2011

    Thanks……useful post…..

    Reply
  17. Armen
    June 7, 2011

    Hey, what about my new slider based called jSwitch?

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

    Reply
  18. akeanant
    June 23, 2011

    Very cool.
    :)

    Reply
  19. Evan Skuthorpe
    July 21, 2011

    awesome, thank you.

    Reply
  20. ravi
    August 6, 2011

    hey great list of useful plugins…thank you for sharing

    Reply
  21. Ahsan Altaf
    August 7, 2011

    Thanks , i was looking for a decent slider :)

    Reply
  22. 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
  23. Durgesh
    August 30, 2011

    Superb, very nice sliders.

    Reply
  24. Valter Henrique
    August 30, 2011

    Thank you, very useful, thanks.

    Reply
  25. Abdelkader Soudani
    September 30, 2011

    awesome, thank you.

    Reply
  26. ola
    October 3, 2011

    Interesting sliders even for a beginner like me!!!

    Reply
  27. Mark William
    November 1, 2011

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

    Reply
  28. Carl Ji
    November 22, 2011

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

    Reply
  29. alovilla
    November 23, 2011

    thank you.I love jquery

    Reply
  30. 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
  31. jeuxdotnet
    November 23, 2011

    Interesting sliders even for a beginner like me!!!

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

    Nice Work Done

    Reply
  33. Sandip
    December 21, 2011

    Superb, very nice sliders.

    Reply
  34. mangalore web design
    December 22, 2011

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

    Reply
  35. 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
  36. طراحی سایت
    January 17, 2012

    great, thanks.

    Reply
  37. Hotel Istanbul
    March 2, 2012

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

    Reply
  38. 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
  39. 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
  40. Umer Saeed
    May 11, 2012

    Likeable :)

    Reply
  41. 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
  42. Nilambar
    June 5, 2012

    Nice collection. Thanks !!!

    Reply
  43. hari prabhas
    July 6, 2012

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

    Reply
  44. Arti
    August 6, 2012

    Very nice list specially the FitText Script.

    Reply
  45. Pouya
    September 14, 2012

    Very goooooooooooooooooooooooooooooooooooooooooood!
    Thank you :-D

    Reply
  46. 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
  47. 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
  48. Eclack Network
    October 26, 2012

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

    Reply
  49. 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