ABOUT

I use s3slider plugin for jQuery for a month in my site.since i am just learning javascript,writing a new plugin instead would be a nice training,so i write this slider plugin for jQuery.

HOW TO USE

step1:,downloadzxdSlider plugin,include jQuery and zxdSlider javascript file in the page.something like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="/js/zxdslider.js" type="text/javascript"></script>
step2:html structure like
<div id="zxdslider"> 
 <span class="slidernav leftnav left">&lt;</span>
 <ul id="zxdsliderContent">
  <li class="zxdsliderli"> <img src="/demo/zxdslider/img/a1.jpg" alt="a1" /> <span>
   <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="jQuery is sweet!">jQuery is sweet!</a></h2>
   <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
   </span> </li>
  <li class="zxdsliderli"> <img src="/demo/zxdslider/img/a2.jpg" alt="a2" /> <span>
   <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is small!">jQuery is sweet!</a></h2>
   <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
   </span> </li>
  <li class="zxdsliderli"> <img src="/demo/zxdslider/img/a3.jpg" alt="a3" /> <span>
   <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is easy to use!">jQuery is sweet!</a></h2>
   <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
   </span> </li>
  <li class="zxdsliderli"> <img src="/demo/zxdslider/img/a4.jpg" alt="a4" /> <span>
   <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is ?!">jQuery is sweet!</a></h2>
   <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
   </span> </li>
 </ul>
 <span class="slidernav rightnav right">&gt;</span> 
</div>
<!-- #zxdslider-->			
step3:css
#zxdslider {
    width: 960px;
    height: 262px;
    position: relative;
    overflow: hidden;
    background:#555;
    margin:10px 0px 25px 0px;
    padding:0;
}
#sliderContent {
    width: 880px;/*its width= #zxdslider's width - .slidernav's width*/
    padding:0;
    margin:0;
}
.zxdsliderli{
    float: left;//must have this
    position: relative;
    display: none;/*must have this*/
    width:880px;/*its width= #zxdslider's width - .slidernav's width*/
    height:262px;
}
.zxdsliderli span {
    position:absolute;/*must have this*/
    right:0;
    font: 13px Arial, Helvetica, sans-serif;
    width:370px;
    color: #ddd;
    display: none;/*must have this*/
    top: 0;
    padding: 10px 13px;
    margin:0 40px 0 0;
}
.zxdsliderli img{
    margin:6px;
}
.zxdsliderli a{
    color:#fff;
}
#zxdslider h2 {
    line-height: 40px;
}
#zxdslider h2 a {
    color: #ddd;
}
.slidernav{
    height:262px;
    width:40px;
    font-size:38px;
    color:transparent;
    line-height:250px;
}
.slidernav:hover{
    cursor:pointer;
}
.rightnav{
    text-align:right;
}
.left{float:left}/*must have this*/
.right{float:right}/*must have this*/          
step4:add this javascript which fires the engine!
check thezxdslider demo page,you can read more detail from the html souce code.

COPY RIGHT

This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones.

BROWSER SUPPORT

as far as i know,it works fine in ie6, ie7, ie8, ie9, firefox, chome, safari...

KNOWN PROBLEM

there is a bug in Jquery 1.5.0 which will cause slider fail to work,so just avoid using Jquery 1.5.0 if you want to use this pluginnot jquery's bug.in version 1.1,it is fixed.

UPDATE

ver 1.1 it works fine with jquery 1.5.0 now.thanks to fudge@stackoverflow

DOWNLOAD

1.1

zxdSlider plugin