In this week's Plus video tutorial, the creator of the extremely popular s3Slider plugin will show you how to build a similar "slideshow" component using jQuery. What better way to learn how to mimic your favorite plugins than to learn from the creators themselves? This isn't one you should miss! Become a Plus member today!
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called "TUTSPLUS". For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you'll learn from some of the best minds in the business. Join today!
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Aljosa July 1st
Odlican tutorial, bravo
( )Great tutorial, good work
chrisberthe July 1st
Nice.
( )Laneth July 1st
Amazing! Ye guys just always know when to release just what I’m looking at learning and integrating into my jobs. Bravo!
( )elinix July 1st
its incredible keep up the great tuts
( )Shuuun July 2nd
Not that smart for a PLUS Tutorial, bebause there are many of this for free.
Anyway, good job!
( )DemoGeek July 2nd
I completely agree with Shuuun, it would be nice to see some sample materials before us taking out the plastic. I’m always on the verge of hitting that button but wasn’t sure of the quality of those screencasts (of course, except the one’s done by Jeff).
( )Shuuun July 2nd
Btw, you should only do a little movie about how it works, if you want the people to join PLUS.
You can get the whole source out of the demo and get the knowledge about this by the jquery docs.
regrades, Nico
( )Jeffrey Way July 2nd
You’re welcome to use the demo source code. It’s not about that…it’s about learning how to create it from scratch.
( )proof July 2nd
I can’t say this is tutorial for PLUS. Demo effect looks very simple
( )Myfacefriends July 2nd
another amazing tuts! from TUTS!
( )Dario Gutierrez July 2nd
Nice, I use a jquery slide for the news in my blog.
( )JimmyJames July 2nd
A better carousel: http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/
( )Web010 July 2nd
Napokon srbin
( )Svaka cast majstore.
Dimitris July 2nd
You cant have a div inside ul li this is bad practice and not xhtml valid.
( )Jeffrey Way July 2nd
Oh sure you can.
( )PNW July 2nd
Who said that you can’t? Using a div inside a ul is fine.
Also, I don’t understand why people post complaints about paying for a tutorial.
Do you stand outside classrooms and complain that it costs money? If you don’t like it MOVE ON. There’s plenty of free tutorials on the web.
It’s depressing that there’s these great TUTS on this site and instead of engaging discussion concerning the TUT, we have a bunch of babies and know-it-alls commenting.
Please, no one cares about your ‘better slider’ or your suspicion that this TUT might not be that good. These whiny comments and ‘This slider is better than your slider’ are childish and best left in one’s own head.
( )Benjamin Reid July 3rd
I’m sure you can, it does validate in transitional and strict.
( )Gavin July 3rd
This is great as I am not a plus member to get all the code given to me, I joined so I can learn how to do it.
Thanks again
( )Satk July 3rd
isn’t this the same thing as this
http://themeforest.s3.amazonaws.com/22_jQueryForBeginners/s3Slider/index.html
why pay when its free in
( )http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-day-14/
Jeffrey Way July 3rd
If I remember correctly, Day 14 only demonstrated how to use a plugin. This PLUS tutorial shows you how to CREATE the plugin. Big difference.
( )Jeffrey Way July 3rd
Not to mention that it was created by the author of one of the most popular slider plugins.
Satk July 3rd
Really sorry, I just remembered seeing this before never watched it myself.
Just shows why I should keep my mouth shut.
Twas July 3rd
The funny thing is jeffrey way did this himself lol
( )Boban Karišik July 3rd
I can guaranty you that i did this tutorial, not Jeff
Cheers.
( )zigh July 3rd
Good effort…
But it ‘very’ seriously needs a cross fade
( )elkaz July 5th
Well written script.
To make it cross fade (without testing this)
just rewrite the fadeOut function as so:
var fadeOut = function(no) {
( )$(captions[no]).fadeOut(fxDuration, function() {
$(items[no]).fadeOut(fxDuration);
fadeIn(calcNext(no));
});
}
gway July 12th
this is awesome,
( )thanx for this tut boban,
it saved me hours of work.
i tried to have some slider plugins to work in a website, and it always failed to show properly, and learning how to do it fixed all problems.
thanx a lot
Boban Karišik July 12th
you`re welcome
( )gway July 13th
but is there a simple way to pause the slider when mouse is on ?
( )Boban Karišik July 14th
Basically it is simple. You need to attach an event to mouseover, and set some global variable to true/false if mouse is over or not, and just before you call fadeOut function you need to check if global variable is set to true or false, if it is set to true, you dont call fadeOut…
( )Jitendra Kushwaha August 3rd
very nice example………….
( )Hamad Adhbiyah November 11th
nice ..
( )