Friday, November 28th, 2008
s3slider: fading gracefully
Category: jQuery
s3slider is a simple jQuery plugin that smoothly lets you fade through a set of images.
You include the script and then:
HTML:
Setup the CSS, and finally the JS
JAVASCRIPT:
-
-
$(document).ready(function() {
-
$('#s3slider').s3Slider({
-
timeOut: 4000
-
});
-
});
-
Related Content:
3.5 rating from 22 votes
It’s very nice but I have some concerns about the required naming convention for elements within the sliders. Maybe I’m wrong but I don’t see any reason for needing to prefix the UL and LI IDs and classes with the ID of the containing DIV.. When in the context of a specific slider element generic classnames would be adequate, in fact the wrapper DIV is possibly entirely redundant as a plain UL itself could be targetted.
This looks tight, nice work.
@Jamie: I agree that prefixing those classes with the ID isn’t required, but I think the prefix is the name of the script and the ID by coincidence. It might not even be required here but it’s a good idea to prefix classes when writing scripts like this since generic classes are not a fool-proof solution.
Don’t get me wrong. I’m all for prefixing plugin-specific css classes. If you read the overview however you’ll see that if you change the id of the holding div so something other than #s3slider you need to change the prefixes of all the classes accordingly.
Looking at the demos, you can see how crazy this gets when you’ve got more than a couple of sliders on the go. The author has got three sliders with ids of #slider, #slider1 and #slider2, each containg UL and LIs classed differently to match their parent DIV…. The CSS then has to apply to all these classes rather than just one.
Crazy amount of redundancy if you ask me
Not that i’m hating. I do actually really like this plugin, though if I were to use it in the real world i’d have to strip it down and make it more streamlined
I agree with jamiethompson. It’s useless and redundant declaring an id for inner list and a class (the same class) for each list item. The script should work using only an id/class on the outer container and find the other elements starting from it.
BTW I tried the examples in the .rar archive but form me there are some problems with the animation because description text doesn’t completely appear in FF3.0.4/Win and Op9.62/Win. In Opera descriptions appear only just a moment before the change effect. I like the effect (thanks to the author) but I think this script has to be improved and fixed.