13 Super Useful jQuery Content Slider Scripts and Tutorials

Posted by Henry Jones on Aug 24, 2009 | 104 Comments

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

AnythingSlider jQuery Plugin

Sliding Boxes and Captions with jQuery

Making a Content Slider with jQuery UI

Creating a Slick Auto-Playing Featured Content Slider

Create Featured Content Slider Using jQuery UI

jQuery.ScrollTo

Moving Boxes

ImageSwitch

jCarousel

Using the Wonderful jFlow Plugin

Create Beautiful jQuery slider tutorial

Step By Step To Create Content Slider using jFlow

Here's some other articles that you will definitely find useful.

7 Fresh and Useful jQuery Plugins

10 jQuery Plugins that Will Make your Life Easier

8 jQuery Plugins for Enhancing Typography

9 jQuery Mistakes you Shouldn’t Commit

8 Responsive jQuery Slider Plugins

102 comments

Karmera
September 16, 2010
Great, thanks!

Do you know which ones degrade gracefully with JS turned off?
Reply
Aravind
September 21, 2010
nice stuff……

Thanks
Reply
SamsonDelila
September 28, 2010
Awesome …! Very very useful.. You’ve helped me save my time…
Reply
Cgbaran
January 12, 2011
Great roundup thanks
Reply
chris
January 12, 2011
Thanks for sharing great post.
Reply
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
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
Banu
March 15, 2011
Thanks! nice slider!!!!!
Reply
Rick
March 29, 2011
Very Cool
Reply
hari prabhas
March 30, 2011
Nice Collection
Thanks for sharing the great post.
Reply
rob
April 5, 2011
brill love jquery
Reply
Ahmed
April 10, 2011
nice roundup thanks for the info
Reply
Geraldo Novais
May 23, 2011
Very cool.
Googlebot and me hate flash websites.
Always, I try to use javascript.
Reply
Designer Renji
May 27, 2011
Thanks……useful post…..
Reply
Armen
June 7, 2011
Hey, what about my new slider based called jSwitch?

http://creativator.net/projects/jswitch/
Reply
akeanant
June 23, 2011
Very cool.

Reply
Evan Skuthorpe
July 21, 2011
awesome, thank you.
Reply
ravi
August 6, 2011
hey great list of useful plugins…thank you for sharing
Reply
Ahsan Altaf
August 7, 2011
Thanks , i was looking for a decent slider
Reply
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
Durgesh
August 30, 2011
Superb, very nice sliders.
Reply
Valter Henrique
August 30, 2011
Thank you, very useful, thanks.
Reply
Abdelkader Soudani
September 30, 2011
awesome, thank you.
Reply
ola
October 3, 2011
Interesting sliders even for a beginner like me!!!
Reply
Mark William
November 1, 2011
Thank you for sharing such wonderful scripts..Very helpful..
Reply
Carl Ji
November 22, 2011
i am trying to use jQuery slider on SharePoint 2007 site, anyone who had experience on that?
Reply
alovilla
November 23, 2011
thank you.I love jquery
Reply
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
jeuxdotnet
November 23, 2011
Interesting sliders even for a beginner like me!!!
Reply
Web Development Company in Rajkot
December 6, 2011
Nice Work Done
Reply
Sandip
December 21, 2011
Superb, very nice sliders.
Reply
mangalore web design
December 22, 2011
Very nice slider jquery plugins, thanks for your effort and upload…
Reply
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
طراحی سایت
January 17, 2012
great, thanks.
Reply
Hotel Istanbul
March 2, 2012
They are really good sliders. JQuery makes somethings very easy Thanks
Reply
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
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
Umer Saeed
May 11, 2012
Likeable
Reply
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
Nilambar
June 5, 2012
Nice collection. Thanks !!!
Reply
hari prabhas
July 6, 2012
very good collection.. thank you for sharing these nice sliders..
Reply
Arti
August 6, 2012
Very nice list specially the FitText Script.
Reply
Pouya
September 14, 2012
Very goooooooooooooooooooooooooooooooooooooooooood!
Thank you
Reply
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
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
Eclack Network
October 26, 2012
They are really nice. But I really need a simple content slider. These are too luxury
Reply

2 Trackbacks

55 Inspiring Examples of Slideshows in Web Design | Inspiration says:

May 10, 2010 at 12:49 am

[...] 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
10 jQuery Slider Techniques and Plugins | Tutorials says:

July 16, 2010 at 1:49 am

[...] = '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

Web Design Ledger

Related Posts

102 comments

Aravind

Joe

Armen

Valter Henrique

ola

Sandip

Mikus

2 Trackbacks

Leave a Reply

Subscribe