Pure Javascript super simple slideshow image number counter?

The issue is I would like to implement a slide counter underneath a image slideshow stating the current slide number against the slide total, e.g '1 of 3' etc.

Being a complete javascript novice I am struggling to find something that works with the existing code I have implemented. — Would appreciate the help to find a solution and implement the slide counter

I have used a some pure javascript pulled it from w3 schools example for a image slideshow and it works great, example can be found here. (Would very much like to keep the next / prev functions the same, i.e cursor click left/right of image)

https://jsfiddle.net/TEK22/1s205La6/

.project {
  position: relative;
  padding: 5% 20% 5% 20%;
  font-family: helvetica, sans-serif;
  font-size: 2em;
}

.imgslide img {
  width: 100%;
}

.prev {
  cursor: zoom-out;
  position: absolute;
  right: 50%;
  height: 100%;
  width: 50%;
}

.next {
  cursor: zoom-in;
  position: absolute;
  left: 50%;
  height: 100%;
  width: 50%;
}

<div class="project">
        <div class="prev" onclick="plusDivs(-1)"></div>
        <div class="next" onclick="plusDivs(1)"></div>
        <div class="imgslide noselect">
            <img class="slides" src="https://i.imgur.com/Xhu0Qz8.png">
            <img class="slides" src="https://i.imgur.com/arLyQDw.jpg">
            <img class="slides" src="https://i.imgur.com/tbpcx4i.png">
        </div>
</div>

<script>

        var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>