Question

您好我试图通过按向上和向下箭头移动此滑块，我尝试了此代码，但它无法正常工作

JsFiddle Here

$("body").keydown(function(e) {
  if(e.keyCode == 38) { // top
    $(".swiper-slide").animate({
      top: "-=518"
    });
  }
  else if(e.keyCode == 40) { // bottom
    $(".swiper-slide").animate({
      bottom: "+=518"
    });
  }
});

Answer 1

为什么不只是trigger the click动作，让键盘执行相同的操作，鼠标点击就可以了。

$("body").keydown(function(e) {

  if(e.keyCode == 38) { // top
    $('.swiper-pagination-bullet-active').prev().trigger('click');
  }
  else if(e.keyCode == 40) { // bottom
    $('.swiper-pagination-bullet-active').next().trigger('click');
  }
});

https://jsfiddle.net/83h6wb5s/5/

Answer 2

您正在使用的Swiper库有一个方法可以转到下一张和上一张幻灯片（您可以在此处查看此库的完整API文档：http://idangero.us/swiper/api/）

var mySwiper = new Swiper(".swiper-container", {
  direction: "vertical",
  loop: false,
  pagination: ".swiper-pagination",
  grabCursor: true,
  speed: 1000,
  paginationClickable: true,
  parallax: true,
  autoplay: false,
  effect: "slide",
  mousewheelControl: 1
});

$("body").keydown(function(e) {
  if(e.keyCode == 38) { // top
    mySwiper.slidePrev();
  }
  else if(e.keyCode == 40) { // bottom
    mySwiper.slideNext();
  }
});

https://jsfiddle.net/h1atwcyy/

如何通过按向上和向下箭头使滑块移动

2 个答案: