How to : button/link that display specific slide in slider [Vanilla Javascript]

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

Solution

You can archive this by update the JavaScript to listen for hash changes and update the displayed slide accordingly.

document.addEventListener('DOMContentLoaded', (event) => {
              var slides = document.getElementsByClassName('slide');
              var slideIndex = 1;
              showSlides(slideIndex);

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

              function currentSlide(n) {
                  showSlides(slideIndex = n);
              }

              function showSlides(n) {
                  var i;
                  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[slideIndex - 1].style.display = 'grid';
              }

              // Next/previous controls
              document.querySelector('.prev').addEventListener('click', function() {
                  plusSlides(-1);
              });

              document.querySelector('.next').addEventListener('click', function() {
                  plusSlides(1);
              });

              // Menu navigation
              document.querySelectorAll('.menu a').forEach(function(link) {
                  link.addEventListener('click', function(e) {
                      e.preventDefault();
                      var slideId = this.getAttribute('href').replace('#', '');
                      for (var i = 0; i < slides.length; i++) {
                          if (slides[i].id === slideId) {
                              currentSlide(i + 1);
                          }
                      }
                  });
              });

              // Listen for hash changes
              window.addEventListener('hashchange', function() {
                  var hash = window.location.hash.replace('#', '');
                  for (var i = 0; i < slides.length; i++) {
                      if (slides[i].id === hash) {
                          currentSlide(i + 1);
                      }
                  }
              });

              // Trigger hashchange on initial load if there is a hash in the URL
              if (window.location.hash) {
                  var hash = window.location.hash.replace('#', '');
                  for (var i = 0; i < slides.length; i++) {
                      if (slides[i].id === hash) {
                          currentSlide(i + 1);
                      }
                  }
              }
          });

*{
  margin: unset;
  padding: unset;
  text-decoration: unset;
  color: unset;
  font-family: sans-serif;
}

.slider{
    height: 100vh;
    width: 100vw;
    background-color: gainsboro;
}

.slides{
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.slide{
  color: white;
  font-size: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}

.prev,
.next{
  user-select: none;
  position: absolute;
  top: 0px;
  width: 50%;
  height: 100%;
}
.prev{
  cursor: w-resize;
}
.next{
  cursor: e-resize;
  right: 0px;
}

.menu{
  position: fixed;
  z-index: 100;
  top: 0px;  
  
  margin: 1.5vh;

}

.menu a{
  font-size: 2rem;
  text-decoration: underline;
  background-color: gainsboro; 
}

.menu a:hover{
  color: olive;
}

<div class="slider">
         <div class="slides">
            <div class="slide" id="olive" style="background: darkkhaki;">olive slide</div>
            <div class="slide"  id="salmon" style="background: salmon;">salmon slide</div>
            <div class="slide"  id="eggplant" style="background: rebeccapurple;">eggplant slide</div>
         </div>
         <a class="prev"></a>
         <a class="next"></a>
      </div>
      <ul class="menu">
         <li><a href="#olive">olive</a></li>
         <li><a href="#salmon">salmon</a></li>
         <li><a href="#eggplant">eggplant</a></li>
      </ul>