支持自动与键盘控制的JS轮播左右方向键无响应问题求助

问题原因 #

当前键盘控制功能失效的核心是键盘事件的绑定写法错误，同时DOM加载初始化的写法也存在隐患：

• 原生JS不存在document.keydown()这种直接赋值回调的写法，可选择标准addEventListener绑定keydown事件，也可使用已引入的jQuery事件绑定语法
• 现有代码中document.addEventListener("DOMContentLoaded", init(currentSlide))会直接立即执行init方法，而非等待DOM加载完成后执行，存在初始化时找不到对应DOM元素的风险

解决方案 #

可根据需求选择以下任意一种修正方案：

方案1：保留现有jQuery依赖 #

将原键盘事件模块代码替换为以下内容：

// NAVIGATE WITH KEYS
$(document).on('keydown', function(e) {
  if (e.keyCode === 37) {
    prev();
    return false;
  }
  if (e.keyCode === 39) {
    next();
    return false;
  }
});

同时修正DOM初始化代码：

document.addEventListener("DOMContentLoaded", () => init(currentSlide))

方案2：完全移除jQuery依赖（更轻量，符合无第三方UI框架需求） #

如果不需要保留jQuery，可直接用原生JS实现键盘事件绑定，替换原键盘事件模块代码：

// NAVIGATE WITH KEYS
document.addEventListener('keydown', function(e) {
  if (e.keyCode === 37) {
    prev();
    e.preventDefault();
  } else if (e.keyCode === 39) {
    next();
    e.preventDefault();
  }
});

同样需要修正DOM初始化代码：

document.addEventListener("DOMContentLoaded", () => init(currentSlide))

可选优化：keyCode属性已被Web标准废弃，可替换为e.key判断，兼容性更优：
左箭头判断改为e.key === 'ArrowLeft'，右箭头判断改为e.key === 'ArrowRight'

修正完成后，左右方向键即可正常控制轮播切换。

内容的提问来源于stack exchange，提问作者Ramona_hongo