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:

  1. // setup the images
  2. <div id="s3slider">
  3.    <ul id="s3sliderContent">
  4.       <li class="s3sliderImage">
  5.           <img src="#" />
  6.           <span>Your text comes here</span>
  7.       </li>
  8.       <li class="s3sliderImage">
  9.           <img src="#" />
  10.           <span>Your text comes here</span>
  11.       </li>
  12.       <div class="clear s3sliderImage"></div>
  13.    </ul>
  14. </div>

Setup the CSS, and finally the JS


  1. $(document).ready(function() {
  2.    $('#s3slider').s3Slider({
  3.       timeOut: 4000
  4.    });
  5. });

Posted by Dion Almaer at 4:15 am

3.5 rating from 23 votes


Comments feed TrackBack URI

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.

Comment by jamiethompson — November 28, 2008

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.

Comment by lovejs — November 28, 2008

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

Comment by jamiethompson — November 28, 2008

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.

Comment by fcaldera — November 28, 2008

Leave a comment

You must be logged in to post a comment.