I recently set out to find a good slideshow for our homepage, but most of them are monsters, with 20kb code, no thanks…
The simples/best solution i found was the s3Slider somewhat simple and looks good.
But after it started behaving silly (sliding to fast/slow, hanging on mouseover) I decided to fix it and discovered a pile of spaghetti. So here is my s3_slider rewrite download that is smaller(now ~1kb) / simpler / maintainable and more easy to setup! Demo of the new version
32 comments
Comments feed for this article
March 12, 2009 at 11:22
David Lima Cohen
[FIXED]
Hi! Thank you very much for spending the time to remake this great little slider. However, I’ve just finished setting up your version, and the rotation cycle seems odd, it goes like this: photo 1, photo 2, photo 4, 2, 4, 2, 4 and so on. Everything else is working fine. The images are named “slide-#.jpg”, I’m using jquery-1.3.1.min and s3-slider.min.js. It would also be nice to start the sliding with a fade-in, or at least showing the label with an animation. Thanks!
March 12, 2009 at 11:24
David Lima Cohen
Oh, I should have mentioned I used a total of 4 images.
March 12, 2009 at 11:34
David Lima Cohen
..and with further page reloads, it can also loop in a photo 1, 3 secuence. You don’t happen to have a bug tacker for this project yet, do you?
March 12, 2009 at 13:46
pragmatig
ups, i fixed that, this was a bug with mouseover calling multiple slidings, thanks for the tip!
Making a fade-in transition at the start would not make sense for me,because I load the page and users should see an image and not a blank spot, then javascript is loaded and the sliding starts. Therefore first showing an then hiding the image would cause flickering.
March 13, 2009 at 8:48
pragmatig
I fixed the start-slide problem while refactoring, if you want to start with a fade from blank to image0, just hide the first slide(display:none).
March 21, 2009 at 18:12
rhuantavan
This looks like a very sleek slider. Always looking for something fresh, and if it is also small on top of that, then so much better.
March 22, 2009 at 7:31
pragmatig
Thanks, the actual goal was not to make it small but understandable/simple, smallness is only a side-effect
March 25, 2009 at 20:20
Matt
sorry for the reposted comment, but it makes more sense here:
Hi,
I’m having an issue with your version of the s3Slider. In IE(7 and 8), only the first image shows the opacity correctly(after i added in the filter css attribute), then every image after that is full opacity. The example you reference on github has the same problem. The old plugin seemed to deal with this but is a mess to look through. Do you have any solutions to this? Thanks,
Matt
March 25, 2009 at 20:49
pragmatig
do you mean it works when no filter css is applied (what filter-css?) or it does not work either way ?
March 25, 2009 at 21:14
Matt
doesn’t work either way. in the last few minutes I’ve been experimenting and took out the filter css and did a jquery browser check for ie. If it’s IE, instead of using fadeIn(I’m testing fadeOut now) I set the span’s opacity to 0 using jQuery’s css() then .show().fadeTo() instead of fadeIn(). This seems to do the trick, although it feels a bit hacky…
March 25, 2009 at 21:40
Matt
Did the same thing for fadeOut, and it seems to work great now on FF, Safari, and IE 7 and 8. For my own purposes, I exposed an opacity parameter from your plugin also to pass in for the IE issue. If you’re interested in what I have please email me. And thanks for all your hard work on this plugin!
March 26, 2009 at 8:45
pragmatig
can you fork my repo and apply these changes, id love to see what you did!
March 26, 2009 at 23:12
Matt
i may have done it wrong, but here’s what i got to work for me: http://github.com/mcritchlow/s3_slider/forkqueue
also, if I kept your display:block on the first child, i add the opacity filter in the css so the first slide has the correct opacity.
March 27, 2009 at 8:39
pragmatig
I updated it, now opacity and fading works perfectly on IEs, thanks Matt
May 3, 2009 at 2:18
Kelly
Awesome! I’ve been using the original s3Slider, but it has problems in IE 7 – it wants to load ALL the images before starting the slideshow. Yours works perfectly! Thanks!
May 3, 2009 at 2:40
Kelly
Well, I spoke too soon. I found a few problems compared to the original s3slider.
1)..If I don’t include a span (don’t want to show ANY text), the slideshow hangs.
2)..If I use an empty span of text, it still shows a black box in the corner – VERY distracting!
3)..Changing the timeout and delay makes no difference – in IE 6 nor FF 3.
May 3, 2009 at 2:56
Kelly
Correction to last comment: IE 7 (not IE 6) and FF 3.
May 3, 2009 at 6:56
pragmatig
as far as I know empty spans did not work in the original either, but I fixed them
(i think timeout did work, but it was spelled incorrectly in the demo timeOut -> timeout, please check if this solves the issue)
May 3, 2009 at 15:59
Kelly
Thanks! Now that these issues are resolved, I’ll consider yours over the original on my next project.
On the original version, I could use an empty span with a class of “none” and it wouldn’t show the box. On yours, it still showed a small box. This is why I had to revert back to the original version until these issues were resolved with your version. Thanks – look forward to trying your latest version.
May 14, 2009 at 6:36
Mika
hi!
thanks for your script, it works perfectly in FF but got a “Stack Overflow at line = xxx” in ie 6/7, I’m not really good at javascript so please can you help me?
May 14, 2009 at 8:05
pragmatig
works for me so far, can you try to download the example and see if it runs standalone ?
May 14, 2009 at 12:57
Mika
your demo works well!!!!
with the last slider…
But i’ve finally found the bug, I use an old version of jquery
Thanks.
May 15, 2009 at 5:54
pragmatig
which version was it ? id like to keep the slider backwards compatible if possible/feasible
June 23, 2009 at 13:04
udoh
Hi,
Nice work on the s3-slider.
I am getting a stack overflow/out of memory error with your script whilst using JQuery 1.3.2 on IE7/8 (probably 6 too, but not tested that).
I am calling the slideshow in an external htm file using http://flowplayer.org/tools/demos/tabs/ajax.html
If I stop using the tabs, and load your s3-slider inside of the main htm file, or change JQuery to 1.3.1 the problem goes away.
Any ideas?
June 23, 2009 at 13:34
pragmatig
hmm im not doing anything weird afaik, so id suspect its a jquery bug, ill have a look at it…
August 31, 2009 at 1:42
Derek Keith
Just wanted to say thanks for this! Saved me some time fixing s3slider!
September 14, 2009 at 16:36
Brian
Thanks for cleaning this up, working great for me.
One question
For the first image in my sequence I have a swf (intro) animation. Currently the s3slider doesn’t wait for my swf to load before transitioning to the next image. Is there a way to hold on swf file (like the mouseover var) while it loads and after it loads execute the fadetime var?
September 14, 2009 at 17:58
pragmatig
a simple solution could be to set the fadetime higher if the image is “.swf”, or set the initial fadetime high and then set it to a lower value later on
November 6, 2009 at 20:46
Michael
I love this plug in. You made it very simple to follow and understand. The only problem I am having is that I would like to have the first image transition in the text. For me it shows up right away with the image. I’ve tested in firefox and internet explorer with the same conclusion. Other than that, it works awesome. The only other suggestion would be a way to not have the images stop when you hove over them. Thanks again.
November 6, 2009 at 20:55
Michael
I figured out the first part. I changed the part of the s3slider file from false to true as below:
//Track mouseover
$slider.mouseover(function() {
mouseOver = false;
});
That makes it still rotate even if the mouse is over the image.
I hope I did that right.
November 7, 2009 at 6:22
pragmatig
yes, this should work. Do you mean that first the image should appear, and then the text? This would be a bit harder, youd need to fadeIn the image and then the text (atm the item is faded in, which contains image and text)
November 13, 2009 at 22:22
tim
Thanks for sharing. your version of s3slider works seamless with jquery 1.3.2.