move on next / prev project left / right with arrow keys

Question

I have this website https://www.sepulturaimpex.ro/portofoliu-constructii-metalice/ I want to move from one image to another by pressing arrow keys from the keyboard. Can u guys help me? Thx I'm trying to use this

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});

HTML

<div class="customNavigation fhsln"> <a class="button__badge1 prev prev-slide transition"><i class="fa fa-angle-left"></i></a> <a class="button__badge1 next next-slide transition"><i class="fa fa-angle-right"></i></a></div>

StackOverflow is not a coding service, Please provide us with what you have tried yourself to create this and then we can help you from there. — Carsten Løvbo Andersen, May 14 '18 at 08:10
Paste the code or give idea what your code is doing and how? — Atul Rajput, May 14 '18 at 08:11

Vaidas · Accepted Answer · 2018-05-14T08:35:03.620

You can try something like this:

var $lg = $(".lightgallery");
$lg.lightGallery(...)

...

$(document).keydown(function (e) {
  e = e || window.event;
  if (e.keyCode === 37) {
    // Left
    $lg.data('lightGallery').goToPrevSlide();
    return false;
  } else if (e.keyCode === 39) {
    // Right
    $lg.data('lightGallery').goToNextSlide();
    return false;
  }
});

After lightGallery initialization, assign action for onKeyDown event and call goToPrevSlide or goToNextSlide functions according to pressed button.

return false is used to avoid horizontal page scroll.

move on next / prev project left / right with arrow keys

1 Answers1