Sudo Slider jQuery Plugin - Different effects pr. slide

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

Usage

Include the javascripts

<script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.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({
           continuous: true
        });
    });
</script>

The HTML

<div id="slider" >
    <ul>
        <li data-effect="box" data-speed="1000"><img src="../images/01.jpg" alt="image description"/></li>
        <li data-effect="slice"><img src="../images/02.jpg" alt="image description"/></li>
        <!-- data-effectout specifies the effect when animating away from that slide, data-effectout takes precedence over data-effect -->
        <li data-effect="slide" data-effectout="slide" ><img src="../images/03.jpg" alt="image description"/></li>
        <li data-effect="boxRainFly" data-speed="1700"><img src="../images/04.jpg" alt="image description"/></li>
        <li data-effect="fade"><img src="../images/05.jpg" alt="image description"/></li>
    </ul>
</div>