Download Source Files
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 Premium
For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Boban Karišik
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Odlican tutorial, bravo :)
Great tutorial, good work :)
Nice.
Amazing! Ye guys just always know when to release just what I’m looking at learning and integrating into my jobs. Bravo!
its incredible keep up the great tuts
Not that smart for a PLUS Tutorial, bebause there are many of this for free.
Anyway, good job!
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).
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
You’re welcome to use the demo source code. It’s not about that…it’s about learning how to create it from scratch.
I can’t say this is tutorial for PLUS. Demo effect looks very simple
another amazing tuts! from TUTS!
Nice, I use a jquery slide for the news in my blog.
A better carousel: http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/
Napokon srbin :)
Svaka cast majstore.
You cant have a div inside ul li this is bad practice and not xhtml valid.
Oh sure you can.
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.
I’m sure you can, it does validate in transitional and strict.
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
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/
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.
Not to mention that it was created by the author of one of the most popular slider plugins.
Really sorry, I just remembered seeing this before never watched it myself.
Just shows why I should keep my mouth shut.
The funny thing is jeffrey way did this himself lol
I can guaranty you that i did this tutorial, not Jeff ;-)
Cheers.
Good effort…
But it ‘very’ seriously needs a cross fade
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));
});
}
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
you`re welcome :)
but is there a simple way to pause the slider when mouse is on ?
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…
very nice example………….
nice ..
hi dear, im kasra, i live in iran , i want to learn s3slider . in my country dosent any card such a visa card or master card .please help me for video learning s3slider to download.
hi dear, this is kasra haghpanah, i live in iran . i want to learn that how to use s3slider plugins. in my country has’nt been any card such a master card or visa card here, please help me for video learning s3slider to download