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

account_circle Unassigned
schedule 3 Days
account_balance_wallet $5

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" />


Mar 21st, 2018

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');"

Jun 28th, 2013

Did you know? You can earn $20 for every friend you invite to Studypool!
Click here to
Refer a Friend
Mar 21st, 2018
Mar 21st, 2018
Mar 22nd, 2018
Mark as Final Answer
Unmark as Final Answer
Final Answer

Secure Information

Content will be erased after question is completed.

Final Answer