JavaScript Slideshow Code + CSS3 Transitions

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 to download Downloaded 5555 Times

This entry was posted in css3, fading, JavaScript, script, slider, slideshow, Syndicated. Bookmark the permalink.

Comments are closed.