Sudo Slider jQuery Plugin - CustomLink demo

CustomLinks can be any html element, just make sure the html element is matched by the CSS selector in the customLink option.

• 
• 
• 
• 
• 

Link to slide number 1

Link to the next slide

Link to the last slide
Link to the previous slide

Link to slide number 3
Link to the first slide

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({
           customLink:'.customLink',
           prevNext:false
        });
    });
</script>

The HTML

<div id="slider" >
    <ul>
        <li><img src="../images/01.jpg" alt="image description"/></li>
        <li><img src="../images/02.jpg" alt="image description"/></li>
        <li><img src="../images/03.jpg" alt="image description"/></li>
        <li><img src="../images/04.jpg" alt="image description"/></li>
        <li><img src="../images/05.jpg" alt="image description"/></li>	
    </ul>
</div>
<a href="javascript:void(0);" class="customLink" data-target="1">Link to slide number 1</a><br />
<h3 class="customLink" data-target="next">Link to the next slide</h3>
<a href="javascript:void(0);" class="customLink" data-target="last">Link to the last slide</a><br />
<a href="javascript:void(0);" class="customLink" data-target="prev">Link to the previous slide</a><br />
<img width="100" height="30" class="customLink" data-target="5" src="../images/05.jpg" alt="image description"/><br/>
<a href="javascript:void(0);" class="customLink" data-target="3">Link to slide number 3</a><br />
<a href="javascript:void(0);" class="customLink" data-target="first">Link to the first slide</a><br />