Question

0

110

Views

Swiper keyboard custom keys

I have a horizontal Swiper and keyboard enabled, which means I can swipe using left and right keys. But I want to be able to swipe using top and bottom keys as well. I wrote this script, but it doesn't work, does anyone have an idea why?

$(document).ready(function() {

  var swiper = new Swiper('.swiper', {
    direction: 'horizontal',
    slidesPerView: 1,
    speed: 600,
    effect: 'fade',
    keyboard: {
      enabled: true,
    },
  });

  swiper.addEventListener("keydown", function(e) {
    if (e.key == 38) {
      swiper.slidePrev();
    }
    if (e.key == 40) {
      swiper.slideNext();
    }
  });

});

I also read this documentation, maybe this is the easier way to assign custom keys, but I have no idea how to use it.

about 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-08-24T16:59:31.108Z

You can use keyPress event with swiper.on method, like it's described here

Example:

swiper.on("keyPress", (swiper, keyCode) => {
  switch (keyCode) {
    case 38:
      swiper.slidePrev();
      break;
    case 40:
      swiper.slideNext();
      break;
  }
});

0

110

Swiper keyboard custom keys

1 answers

0

Find remote jobs

Andres GPT