nice jquery content slider

In my portfolio page , i want to have a content silder to show some of my works ,but didn’t find a satisfied one by google .so i decide to code it myself. You can check the final result here : http://www.brightyoursite.com/portfolio.html ,
Let’s see how it work …..

First, Let’s see how this silder should work : it can be a slide or fadein , fadeout by config ; can be silde or fade automatically when page load by config;the most important thing i want is when user click one of the item it can hold on the selected item for a longer time in order to make sure the user have enough time to read the content .

Options

var defaults = {
		mode: 'slide',
		speed: 500,
		auto: false, 
		pause: 3000,
		select:10000,
		width: $(this).children('.silderitem').width(), 
		wrapper_class: 'container'
	};

Mode : value can be ‘slide’ or ‘fade’ , that’s define how the silder work.
Speed : Integer which define the fade or slide speed.The Larger values more slowly.
Auto : valid value is true or false , true means start fade or slide automatically when page load.
Pause : Integer define the interval of the slide or fade . Larger values longer time.
Select : Integer ,define the interval when click of the item , so the user have enough time to read the content .If set value 0, it will break the auto slide/fade after click .
Width : the slide or fade item width , aways it can get automatically .
wrapper_class : the css class name of the items wrapper which include all the slide or fade items.
Only for version 2.1.0
Loop : when true the the slider will reverse to the first one auto.
height : set the slider content height
the new version(2.1.0) also support muti-slider/fade in a page. .

How to use ?

HTML Codes:

<div id='sildercontent'>
  <div class='silderitem'>silder content 1</div>
  <div class='silderitem'>silder content 2</div>
 <div class='silderitem'>silder content 3</div>
 <div class='silderitem'>silder content 4</div>
 <div class='silderitem'>silder content 5</div>
</div>
 
<ul id='slnav'>
<li class='active'>item1</li>
<li >item2</li>
<li >item3</li>
<li >item4</li>
<li >item5</li>
</ul>

JAVASCRIPT Codes:

<script type="text/javascript" language="javascript" src="jquery.js" ></script>
<script type="text/javascript" language="javascript" src="jquery.suSlider.js" ></script>
<script type="text/javascript" language="javascript"  >
    $(document).ready(function(){ 
   $('#sildercontent').suSlider(); 
});
</script>

Example

Online demo : jquery content silder    jquery content fade

Download Soure Codes & Example

jqurey content slider / jquery content fade plugin

Update

Latest Version jqurey-content-slider-2.1.0.zip (Include demo )