for a portfolio website purpose, I’ve created a (very simple) carousel.

Thing is :
I want my slider/carousel to be usable with a menu (in addition to Next and Prev buttons).
To be more precise, each link from a menu, have to display its related slide.
I was thinking of associating hash location and id, but I have no clue about making the url load the slide.

Advice welcome 🙂

There is the code pen
sketch

var prev = document.querySelector(".prev");
var next = document.querySelector(".next");

var slideIndex = 1;

showSlides(slideIndex);

prev.addEventListener("click", function(){
  plusSlides(-1)
});
next.addEventListener("click", function(){
  plusSlides(1)
});

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {

  var i;
  var slides = document.getElementsByClassName("slide");

  if (n > slides.length) {slideIndex = 1}

    if (n < 1) {slideIndex = slides.length}

      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
        slides[i].classList.remove("slideactive");
      }

      slides[slideIndex-1].style.display = "grid";
      slides[slideIndex-1].classList.add("slideactive");
      window.location.hash = slides[slideIndex-1].id;
      console.log(window.location.hash);
  
} // end function showSlides