JavaScript Slideshow Code + CSS3 Transitions

Javascript 44 responses so far

JavaScript Slideshow Code

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:

  • CSS3 hardware transition support for Firefox and Webkit browsers
  • Automatic or manual slide rotation
  • Option to resume play after interruption
  • Toggle to pause auto play on slide hover
  • Set the initial slide index with a parameter
  • Pass a navigation ID of a list and have the script bind either click or hover events for navigating the slideshow
  • Ability to move to previous or next slide
  • Functions to play and pause the automatic slideshow
  • Parameter to set the transition duration

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 here for the demo.

Click hereTo Download

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

  • S.Rangaraj

    thanks to a very good slider. it is very nice.

  • rn

    i was not able to install it in my phone

  • adamreid83

    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.

  • Jen

    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!!!!!

  • JD

    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()

  • Aaron automar

    Hi where do the script tags go and what section goes in the body? you could try labeling that next time

  • Nia Valeria

    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.

  • iWeb Expert

    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.

  • bullzeyezm

    great code

  • Jamie111111112

    how do you add the javascript? is there a tutorial, please help

  • Stephen

    Great Script; worked perfectly fist time with 10 pictures. Thanks!

  • germcode

    Love this!
    It needs thumbnails
    http://www.dubstepfood.com

  • Jessie Philipps

    great post, thanks for sharing with us.

  • Lisa

    Thanks for the script! Is there a way to make it stop after completing 1 cycle?

  • Justin

    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.

  • jayquan carter

    Csn you add this to a website homepage as a slide to show ads?

  • Lisa

    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.

  • Lisa

    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.

  • kelvin rabbo

    its good for us

  • Beginner

    This is great. How would I alter the code to use more than 4 images?

  • Miquel

    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.

  • Miquel

    This happens when pauseHover is also true. If I set it to false, auto:0 works well.

  • ajay

    how to change the position
    i want the whole thing to be left & middle of page

  • Design Media

    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

  • Ashish Singh

    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.

  • Anna M

    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.

  • hdpei

    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 ?

  • Kristine

    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!

  • joanna

    This is a fab slide show but I am wondering if it is possible to add links to the slides so that when you click on them they go to the various pages of my website. Apologies, I am a novice at this….

  • Favio

    Hello, thanxs for this slide.

    Y got a question about it. How can I use more than one slide in a single page?
    y tried to change the ID name in every "slide" div but it does not work ok. What do you suggest?

  • flawny

    Thank you for the slides(li) comment. It fully fixed the problem I was having.

  • Euan Flawn

    To add more images, just add more li and img tags in the slides list.
    Don't forget to add the same number of li items to the pagination list as well, otherwise you will end up with lots of images but still only 4 circles to navigate.

  • Euan Flawn

    I haven't tried this myself but usually for a slide show there is a part that says
    If you are at the last image, the next image will equal the first image, kind of like this:
    if(image count = end)
    image count = start

    I'm not sure exactly where it is in this code but if you change that statement to be either nothing or just to be the last image, that should stop the slide show repeating.

  • Euan Flawn

    A good rule is that all script tags go at the end of your HTML page before the </html> tag.
    This way your page loads faster.
    If yo put it in the middle of your page, the page has to load the javascript file before loading anything under the script tags.

  • Euan Flawn

    Thank you for this code.
    I had a basic looking slideshow before but this has made my website look very professional.
    Thanks again

  • Pablo

    Hi many thanks for sharing the code. It is perfect.

    I'm trying to make it responsive by changing the "width" to "100%" in "#wrapper", "#slideshow", "#slides", and "#slides li" and worked perfectly, but the "height" to "auto" is not working, and need to be fixed in "#slides" …. please help.

  • Alec Krawciw

    how do I add my images to the code (ive never done this before}

  • Pags

    Thank you for all your work. This is a great slideshow. One question: If I have images cropped at 4:5 and some at 5:4 what must I do to allow them to be shown in their original sizes? Currently the slideshow box is static in shape. Thank you for your help.

  • fms

    Thank you for sharing the code of the slideshow (TinySlider).