TinyFader2 is a 2KB JavaScript slider code that is completely configurable through robust options. It is an upgrade to the previous TinyFader version adding a number of requested features and making additional improvements. It gracefully degrades without JavaScript support and is totally customizable using CSS.
Here are the current features:
Other improvements include setting the opacity to 0 on slides besides the current one, cycling the z-index, improving code readability, upgrading the codebase to HTML5, and a handful of other tweaks.
To initialize the script use the following:
var ss = new TINY.fader.init("ss", {
id: "slides", // ID of the slideshow list container
position: 0, // index where the slideshow should start
auto: 0, // automatic advance in seconds, set to 0 to disable auto advance
resume: true, // boolean if the slideshow should resume after interruption
navid: "pagination", // ID of the slide nav list
activeClass: "current", // active class for the nav relating to current slide
pauseHover: true, // boolean if the slideshow should pause on slide hover
navEvent: "click", // click or mouseover nav event toggle
duration: .25 // duration of the JavaScript transition in seconds, else the CSS controls the duration, set to 0 to disable fading
});The first parameter is the variable name used for the object instance. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the GNU GPL v3.0 license.
Click to download Downloaded 9461 Times 
February 24, 2013
February 3, 2013
thanks to a very good slider. it is very nice.
i was not able to install it in my phone
This is a great slider!! Very easy to use and tweak. I tried this in Firefox, and the images doesn't seem to show up at all, just the slideshow bg. I don't mind if there are no sexy transitions, but it'd be good if it could show the images and transition at least some. I'm using FF 3.6 if that helps. Any suggestions would be greatly appreciated. For now I think I'll have to stick with the first one. Again, other than that, this is a great slider! Thanks for posting this!!
PS: Attached a screenshot if it helps. (I added the frowny face)
Thanks for the report, the package has been updated.
As a complete novice, I have struggled to implement any javascript slideshow that i've found online…but yours worked brilliantly even without detailed step-by-step instructions. A huge thanks!!!!!
Hi, this looks great, just one question. You mention there is a function for play/pause, but I'm only seeing the pauseHover. Is there a function for something like a play/pause button?
Thanks.
Yes, the function is simply instance.play() and instance.pause() so if the instance name was ss like in the example ss.play()
Hi where do the script tags go and what section goes in the body? you could try labeling that next time
Hi, how to set the images opacity to be 0? i'm using images with no background…so when the image change, the rest of the images still can be seen.
This looks so cool and elegant. I never thought that combining javascript and css can have an amazing outcome. I will surely try this one.
great code
how do you add the javascript? is there a tutorial, please help
Great Script; worked perfectly fist time with 10 pictures. Thanks!
Love this!
It needs thumbnails
http://www.dubstepfood.com
great post, thanks for sharing with us.
Thanks for the script! Is there a way to make it stop after completing 1 cycle?
Hi, I'm a complete novice… do I need to attach the fader.js files to the html file or do i just put the script in the <head>?
And then once I set it up properly, how do I assign the correct images to be displayed? Thanks in advance.
Csn you add this to a website homepage as a slide to show ads?
You attach the fader.js files to the HTML file and then insert this before </body>:
var ss = new TINY.fader.init("ss", {
id: "slides", // ID of the slideshow list container
position: 0, // index where the slideshow should start
auto: 0, // automatic advance in seconds, set to 0 to disable auto advance
resume: true, // boolean if the slideshow should resume after interruption
navid: "pagination", // ID of the slide nav list
activeClass: "current", // active class for the nav relating to current slide
pauseHover: true, // boolean if the slideshow should pause on slide hover
navEvent: "click", // click or mouseover nav event toggle
duration: .25 // duration of the JavaScript transition in seconds,
else the CSS controls the duration, set to 0 to disable fading
});
To set the images, in your HTML file create an unordered list (<ul> tag). Make sure you make the ID of your unordered
list the same as "id". So in the example, the ID of your unordered list
must be "slides" (<ul id="slides">). Then add your images inside
<li> tags. Each <li> tag should have 1 image in it.
Sorry, for the first sentence, it should read as this: You attach the fader.js files to the HTML file and then insert the "var ss = new TINY.fader.init" code right before the closing body tag.
its good for us
This is great. How would I alter the code to use more than 4 images?
Hi, when I set auto:0, the slider goes absolutely mad changing pictures very fast.
This is happening also in the example you provide with the downloaded file.
This happens when pauseHover is also true. If I set it to false, auto:0 works well.
how to change the position
i want the whole thing to be left & middle of page
Hi i am looking for this one of ur old post but i m unable to download it .. i just need to put my products in same design as its displayed here can u please provide me source code of it
http://forum.scriptiny.com/index.php?app=downloads&showfile=6
http://www.scriptiny.com/2008/12/javascript-slideshow/
thanks
Is there a way to have a default slide and everytime mouseout is triggered the current slide will fade out to the default slide. By the way, the slides (li) needs solid color or image background or else the slides overlaps.
Great and super light slider! Thank you.
Is it possible to move the controls on top of the slide show instead of having them underneath/on the sides? I am struggling with the code to achieve that. Any help is greatly appreciated!
http://www.pickettdesign.com/test_site/index.html
Above is a little problem I can’t quite figure out – when loading image links for tiny fader to display all works fine, until it gets to the second to last and then it returns to showing the first image and all the while the second to last and last images of the fade sequence display below the slideshow window. The link above illustrates the problem. Any thoughts? I’ve stripped out everything not – related to tiny fader and still no go. The images are 900 x 500px and there are 8 of them. I was thinking maybe height restriction but couldn’t find anything. A restriction in the javascript? Thanks in advance for your help.
Matt
Nevermind. fixed it.
Two faders in one page, the first doesn’t work,I have change the name need be changed, “slider-button” of the first fader control the second fader…
great slider. thanks.
how to change nav position from bottom to left side ?
Hello!
Thank you so much for this!
I have one question: how can I change the code so that pictures move to the side and not just fade in to the next one? Thanks in advance!