Use Arrows Keys to Trigger Jquery Slider

Posted in Code Snippets

Use Arrows Keys to Trigger Jquery Slider

This code is from jqueryfordesigners.com. It uses the current item class to find the next or previous list item, and trigger a click event on that item. If the current class is on the link tag itself, you need to move up to the parent element first. See the original article for the code including the .parent thing.

<script>
$(document.documentElement).keyup(function (event) {
  // handle cursor keys
  if (event.keyCode == 37) {
    // go left
    $('#roundabout-wrap ul li.roundabout-in-focus')
      .prev() // moves to the adjacent li element
      .find('a') // moves down to the link
        .click(); // triggers a click on the previous link
  } else if (event.keyCode == 39) {
    // go right
    // same as above, but just on one line and next instead of prev
    $('#roundabout-wrap ul li.roundabout-in-focus').next().find('a').click();
  }
});
</script>