Simple Slideshow Plugin For jQuery - fadeSlideShow

fadeSlideShow is a lightweight and fast slidershow plugin built with jQuery that makes it easier to create an images slideshow with image fade effect and auto play function. It is highly customizable with javascript/HTML/CSS and either can work with any element of your page.

How to use it:

1. Include jQuery and fadeSlideShow.js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeSlideShow.js"></script>

2. Call the plugin with options

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#slideshow').fadeSlideShow();
});
</script>

3. Markup

<div id="slideshowWrapper">
    <ul id="slideshow">
        <!-- This is the last image in the slideshow -->
        <li><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the last image in the slideshow -->
        <li><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></li>
        <li><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></li>
	<!-- This is the first image in the slideshow -->
        <li><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the first image in the slideshow -->
    </ul>
</div>

4. The CSS

#slideshowWrapper {
position: relative;
width: 646px;
margin: auto;
}
#fssPrev {
position: absolute;
top: 169px;
left: -67px;
background: url(arrows.png) -67px 0px;
width: 67px;
height: 143px;
text-indent: -999999px;
}
#fssNext {
position: absolute;
top: 169px;
left: 646px;
background: url(arrows.png) no-repeat;
width: 67px;
height: 143px;
text-indent: -999999px;
}
#fssPlayPause {
position: absolute;
top: 435px;
right: 20px;
background: url(white.png) repeat;
padding: 4px 0 5px 0;
-moz-border-radius: 5px;
border-radius: 5px;
width: 60px;
text-align: center;
display: block;
color: #333;
text-decoration: none;
}
ul#slideshow {
list-style: none;
border: 1px solid #999;
padding: 2px;
margin: auto;
margin-top: 5%;
width: 640px;
height: 480px;
overflow: hidden;
}
p {
text-align: center;
}
#fssList {
list-style: none;
width: 646px;
margin: auto;
padding: 5px 0 0 45%;
}
#fssList li {
display: inline;
padding-right: 10px;
}
#fssList li a {
color: #999;
text-decoration: none;
}
#fssList li.fssActive a {
font-weight: bold;
color: #333;
}

5. Options (Edit in fadeSlideShow.js)

width: 640, // default width of the slideshow
height: 480, // default height of the slideshow
speed: 'slow', // default animation transition speed
interval: 3000, // default interval between image change
PlayPauseElement: 'fssPlayPause', // default css id for the play / pause element
PlayText: 'Play', // default play text
PauseText: 'Pause', // default pause text
NextElement: 'fssNext', // default id for next button
NextElementText: 'Next >', // default text for next button
PrevElement: 'fssPrev', // default id for prev button
PrevElementText: '< Prev', // default text for prev button
ListElement: 'fssList', // default id for image / content controll list
ListLi: 'fssLi', // default class for li's in the image / content controll 
ListLiActive: 'fssActive', // default class for active state in the controll list
addListToId: false, // add the controll list to special id in your code - default false
allowKeyboardCtrl: true, // allow keyboard controlls left / right / space
autoplay: true // autoplay the slideshow

\

Change Log:

v2.2.0 (2013-02-25)

• Fixed a Problem with the KeyboardCtrl function

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.