Sudo Slider jQuery Plugin - Basic keyboard navigation

Methods in docs
  • image description
  • image description
  • image description
  • image description
  • image description

Press the right and left buttons on your keyboard to navigate.

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({ 
         prevNext: false,
         continuous:true
      });
      $(document).keydown(function (e) {
         if (e.which == 39) { // Arrow right
            sudoSlider.goToSlide("next");
         }
         else if (e.which == 37) { // Arrow left. 
            sudoSlider.goToSlide("prev");
         }
      });
   });
</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>