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.
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
});
Posts
0 comments:
Post a Comment