Javascript - Carousel managed automatically and with keyboard-CodePudding

I'm developing an automatic and keyboard managed carousel slider but it doesn't respond when I hit the previous or back buttons in the keyboard. It works when I click the previous and next buttons, and changes automatically. Here is my HTML and Js code:

let currentSlide = 0;
const slides = document.querySelectorAll(".picture")

//carousel
const init = (n) => {
  slides.forEach((picture, index) => {
    picture.style.display = "none"
  })
  slides[n].style.display = "block"
}

//left and right buttons
document.addEventListener("DOMContentLoaded", init(currentSlide))
const next = () => {
  currentSlide >= slides.length - 1 ? currentSlide = 0 : currentSlide  
    init(currentSlide)
}

const prev = () => {
  currentSlide <= 0 ? currentSlide = slides.length - 1 : currentSlide--
    init(currentSlide)
}

document.querySelector(".buttonleft").addEventListener('click', prev)

document.querySelector(".buttonright").addEventListener('click', next)

//each 3 seconds change picture
setInterval(() => {
  next()
}, 3000);

// NAVIGATE WITH KEYS
document.keydown(function(e) {
  if (e.keyCode === 37) {
    // Previous
    $(".buttonleft").click();
    return false;
  }
  if (e.keyCode === 39) {
    // Next
    $(".buttonright").click();
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-container">
  <!-- next and prev buttons -->
  <div class="navigation">
    <div class="btn buttonleft">
      <img src="assets/img/left.png">
    </div>
    <div class="btn buttonright">
      <img src="assets/img/right.png">
    </div>
    <!-- carousel -->
    <div class="carousel">
      <div class="logo">
        <img src="assets/img/mmlogo.png" alt="Yahoo" class="image">
      </div>
      <div class="picture fade">
        <a href="http://www.yahoo.com" target="_blank">
          <img src="assets/img/image1.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
      <div class="picture fade">
        <a href="http://www.google.com" target="_blank">
          <img src="assets/img/image2.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
      <div class="picture fade">
        <a href="http://www.youtube.com" target="_blank">
          <img src="assets/img/image3.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
      <div class="picture fade">
        <a href="http://www.gmail.com" target="_blank">
          <img src="assets/img/image4.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
      <div class="picture fade">
        <a href="http://www.outlook.com" target="_blank">
          <img src="assets/img/image5.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
    </div>
  </div>
</div>

Any ideas? I don't want to use Bootstrap.

Thanks!

CodePudding user response：

Looks like you're using vanilla javascript, until the last event listener. Looks like jquery.

Make it vanilla js like you did above. It works fine.

Keeping your console tools open will give you a good idea of what's wrong.

document.addEventListener('keydown', (function(e) {
    if (e.keyCode === 37) {
       // Previous
       console.log("prev");
    }
    if (e.keyCode === 39) {
       // Next
       console.log("next");
    }
}));