Next/Previous image using Arrow Keys on Keyboard on a simple image slider?

Question Description

I have created a simple Image Slider provided by Ivan Lazarevic and was wondering how to add Next/Previous navigation to it, by using the arrow keys left and right on the keyboard. I've made some tests but can't seem to get it to work properly. I would also like the image to change to the next one when clicking on it. Would appreciate any help on the way.

$('#thumbs').delegate('img','click', function(){ $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); $('#description').html($(this).attr('alt')); });

<div id="gallery">
<div id="panel">
<img id="largeImage" src="image_01_large.jpg" />

<div id="thumbs">
<img src="image_01_thumb.jpg" />
<img src="image_02_thumb.jpg" />


Final Answer

Next/previous Navigation (i am doing it after ages so maybe it will help you old way of coding)

// when the document is ready, run this function
jQuery(function( $ ) {
  var keymap = {};

  // LEFT
  keymap[ 37 ] = "li.prev a";
  // RIGHT
  keymap[ 39 ] = " a";

  $( document ).on( "keyup", function(event) {
  var href,
  selector = keymap[ event.which ];
  // if the key pressed was in our map, check for the href
  if ( selector ) {
  href = $( selector ).attr( "href" );
  if ( href ) {
  // navigate where the link points
  window.location = href;

Change image to next when clicked
Your link tag should have # as the href and the js in an onclick event like this:
href="#" onclick="$('.pg_next a').trigger('click');"
href="#" onclick="$('.pg_previous a').trigger('click');"

Jymee (3)
New York University

The tutor managed to follow the requirements for my assignment and helped me understand the concepts on it.

The tutor was knowledgeable, will be using the service again.

Awesome quality of the tutor. They were helpful and accommodating given my needs.


Brown University

1271 Tutors

California Institute of Technology

2131 Tutors

Carnegie Mellon University

982 Tutors

Columbia University

1256 Tutors

Dartmouth University

2113 Tutors

Emory University

2279 Tutors

Harvard University

599 Tutors

Massachusetts Institute of Technology

2319 Tutors

New York University

1645 Tutors

Notre Dam University

1911 Tutors

Oklahoma University

2122 Tutors

Pennsylvania State University

932 Tutors

Princeton University

1211 Tutors

Stanford University

983 Tutors

University of California

1282 Tutors

Oxford University

123 Tutors

Yale University

2325 Tutors