Super Simple jQuery Slideshow Plugin with Crossfade Effects - Nicefade

File Size: 8.33 KB
Views Total: 1305
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Super Simple jQuery Slideshow Plugin with Crossfade Effects - Nicefade

Nicefade is an extremely simple and lightweight jQuery plugin helps you create a clean Html content slideshow with crossfade animation. The plugin comes with some optional setting to customize the slideshow as well as some public functions which allow you to control the slideshow manually.

Basic Usage:

1. Load the latest jQuery javascript library together with jQuery nicefade plugin in your Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nicefade.min.js"></script>

2. Wrap the Html contents in the UL or OL list.

<div id="nicefade_wrapper">
<ul class="nicefade_container clear">
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
<li>Fourth Slide</li>
<li>Fifth Slide</li>
</ul>
<ul class="nicefade_index-list clear">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>

3. Call the plugin on the wrappers.

<script type="text/javascript">
$(function(){
$('#nicefade_wrapper .nicefade_container').nicefade();
});
</script>

4. The sample CSS to style the slideshow.

.nicefade_container {
	position: relative;
	width: 600px;
	height: 220px;
}

.nicefade_container > * {
	width: 600px;
	height: 220px;
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #676767;
	line-height: 220px;
	text-align: center;
	font-size: 2em;
}


#nicefade_wrapper {
	margin-top: 20px;
}

.nicefade_container li + li {
	display: none;
}

.nicefade_index-list {
	padding: 15px 0;
	margin-top: 15px;
}

.nicefade_index-list:after {
	content: " ";
	width: 100%;
	clear: both;
}

.nicefade_index-list li {
	float: left;
	margin-right: 10px;
}

.nicefade_index-list a {
	display: block;
	padding: 5px 10px;
	color: #222;
	font-weight: bold;
	text-decoration: none;
}

.nicefade_index-list .current a {
	background: #222;
	color: white;
}

#nicefade_wrapper {
	width: 638px;
	margin: 0 auto;
}

#nicefade_wrapper ul {
	margin: 0;
	list-style:none;
}

5. Available options and defaults.

<script type="text/javascript">
$(function(){
$('#nicefade_wrapper .nicefade_container').nicefade({
'animationSpeed': 500, // speed of slideshow animation in milliseconds
'animationDelay': 5000, // delay between animations in milliseconds
'indexList': $container.siblings('.nicefade_index-list'), // ul or ol with each child li representing their own slide in the slideshow
'initialIndex': 1, // the slideshow's starting point
'currentClass': 'current', // the class of the current slideshow item and current index item
'afterSlideChange': null, // function that gets called after the slides finish changing
'beforeSlideChange': null // function that gets called before the slides begin to change
});
});
</script>

6. Public functions.

next() // advance the slideshow one step forward
previous() // move the slideshow one step backward
seek( index ) // change the visible slide to the one at index @index
stop() // stop the slideshow's automated animation
slideshow_length() // the number of elements in the slideshow
current_slide() // the slide currently being shown
target_slide() // the slide that is targeted to fade in (via click or automation)

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