How to go to next and previous slides with keyboards right and left arrow keys?

[xcfx2888]

this is my script.js file where I have created functions for go to previous and next slides resp with timer and buttons , but manually by clicking next and previous buttons the slides are changng but in addition to this I also want to do this by keyboard right and left key pressing .

           //script for generate one by one questions
            var timer;
           function gotoNextSlide() {
          timer && clearTimeout(timer);
          goToSlide(getCurrentSlide().index() + 1);
          timer = setTimeout(gotoNextSlide, 1000 * 60);
       }

       function gotoPrevSlide() {
         goToSlide(getCurrentSlide().index() - 1);
           }

          function getCurrentSlide() {
              return $("#slides .slide:visible");
           }



               function goToSlide(index) {
                   var $slides = $("#slides .slide");
                     if (index >= 0 && index < $slides.length) {
                          $slides
                         .removeClass("active")
                               .eq(index)
                         .addClass("active");
                               $(".dot")
                        .removeClass("active")
                               .eq(index)
                       .addClass("active");
                        }
                     }
           function init() {

        $(".goto-next-slide").click(gotoNextSlide);
         //timer for next question slide
           timer = setTimeout(gotoNextSlide, 1000 * 60);
          $(".goto-prev-slide").click(gotoPrevSlide);

           goToSlide(0);
       }

       $(document).ready(init);

here is my next and previous buttons

   <a class="goto-next-slide overlay-button overlay-right">Next</a>    
<a class="goto-prev-slide overlay-button overlay-left">Previous</a>

everytthing is working fine but by clicking those two buttons and in addition to this I just want to bind the arrow left and right keys of keyboard to go to next slide and previous slides resp , I am getting confused on how to do this ? I know the one way is to use key37 and 39 but unable to apply here.

I tried by this but not working actually I am confused where to call the keydown function ?

             $(document).keydown(function(e) {
switch(e.which) {
   
   case 37: // left
     function() { $(".goto-prev-slide").click(); }
    break;

  case 39: // right
   function() { $(".goto-next-slide").click(); }
    break;

  default: return; // exit this handler for other keys
}
 e.preventDefault(); // prevent the default action (scroll / move caret)
});

where I am going wrong ?

[m3g4p0p]

Hi @xcfx2888, you are conditionally declaring functions in the switch / cases without ever calling them; but actually those function wrappers are not even necessary here (BTW event.which is deprecated – use event.code instead):

$(document).keydown(function (e) {
  switch (e.code) {
    case 'ArrowLeft':
      $('.goto-prev-slide').click()
      break

    case 'ArrowRight':
      $('.goto-next-slide').click()
      break

    default:
      // Do nothing
  }
})

Also I’d suggest to call gotoNextSlide() and gotoPrevSlide() directly, rather than by triggering DOM events so you get a more telling call stack in case something goes wrong:

$(document).keydown(function (e) {
  switch (e.code) {
    case 'ArrowLeft':
      gotoPrevSlide()
      break

    case 'ArrowRight':
      gotoNextSlide()
      break

    default:
      // Do nothing
  }
})

This could then be further improved by replacing the unwieldy switch / case with a dispatch table:

var keyHandlerMap = {
  ArrowLeft: gotoPrevSlide,
  ArrorRight: gotoNextSlide
}

$(document).keydown(function (e) {
  var keyHandler = keyHandlerMap[e.code]

  if (keyHandler) {
    keyHandler()
  }
})

[xcfx2888]

hey , I did the same, btw thanks for the suggestion