“Cross-Fading” Slider

This is a Slider Script that uses cross-fading effect for slide change transition effects.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these line of HTML code in order to include the jquery00.js script that includes jQuery framework:

The gallery initialization is placed to the end of HTML coding (just before </body> closing tag) and contains all the necessary configuration values.

effect attribute defines slide transition effect:

•    default – no transition effect, just switch the image;
•    fade – fade effect;
•    slide – slides are shifting down.

fadeOutSpeed attribute defines slide transition speed:

•    default – 4 seconds;
•    fast – 8 seconds;
•    slow – 2 seconds.

rotate attribute defines slide rotation:

•    true – slides are showing continuously;
•    false – each slide is shown only once.

HTML
Below you can see the HTML script representation:

Make sure that the number of navigation buttons (<a> tags inside the <div> tag with .tabs style) should be equal to the number of slides.

CSS
You can find script related stylesheet in the main style.css file. You will need to modify the following styles: