Sudo Slider jQuery Plugin - Manuel positioning demo

  • image description
  • image description
  • image description
  • image description

Usage

Include the javascripts

<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

The Javascript to start it.

<script type="text/javascript" >
    $(document).ready(function(){	
        var sudoSlider = $("#slider").sudoSlider({
            controlsFade:false
        });
    });
</script>

The CSS

#slider {
    width:696px;
}
#slider img{
    border:none;
}
#slider ul, #slider li{
    margin:0;
    padding:0;
    list-style:none;
}
#slider li { 
    width:696px;
    overflow:hidden; 
}

The HTML

<div id="slider">
   <ul>				
      <li><img src="../images/01.jpg" alt="image description"/></li>
      <li style="position:absolute;top:0;left:696px;"><img src="../images/02.jpg" alt="image description"/></li>
      <li style="position:absolute;top:241px;left:0;"><img src="../images/03.jpg" alt="image description"/></li>	
      <li style="position:absolute;top:241px;left:696px;"><img src="../images/04.jpg" alt="image description"/></li>
   </ul>
</div>