How to make dynamic Javascript previous and next buttons?

Question

I made a previous and next button function for a slide show, but after a few hours I found out that it is not dynamic.

For example if I press 3 times the next button (since theres 3 pictures yet) it resets to the first picture with an if statement, but if I doesnt end that cicle, for example if I press it two times (now stops at the third image and will go to the first if pressed once more) and press the previous button one time, it goes back to the second picture, and now if I press the next button (with a counter of 2) it resets it self (thats how I wrote it sadly) and instead of going from picture 2. to picture 3., it goes to the first one.

I'm not sure if I explained it well, but here is the code:

var nextArrow = document.getElementsByClassName("next");
var prevArrow = document.getElementsByClassName("prev");



pictures[0].style.display="block";

var n = 1;

nextArrow[0].onclick = function()
{
    for(var i = 0; i < pictures.length; i++)
    {
        pictures[i].style.display="none";
        pictures[n].style.display="block";
    }
    n++;
    if(n == pictures.length)
    {
        n = 0;
    }
}

var p = pictures.length -1;
prevArrow[0].onclick = function()
{
    for(var i = 0; i < pictures.length; i++)
    {
        pictures[i].style.display="none";
        pictures[p].style.display="block";
    }
    p--;
    if(p == -1)
    {
        p = pictures.length - 1;
    }
}

HTML:

    <div class="main-slideShow-div">
    <div class="slideshow-container">
        <div class="my-slides">
                <img class="pic" src="images/animals/dog1.jpg">
        </div>

        <div class="my-slides">
                <img class="pic" src="images/animals/dog2.jpg">
        </div>

        <div class="my-slides">
                <img class="pic" src="images/animals/dog3.jpg">
        </div>
    
        <img class="prev" src="images/leftArrow.png" alt="leftArrow">
        <img class="next" src="images/rightArrow.png" alt="rightArrow">
        
        <div class="slider-div" style="text-align:center">
            <div id="lines" class="line"></div>
            <div id="lines2" class="line"></div>
            <div id="lines3" class="line"></div>
        </div>
    </div>
    </div>
    <script src="javascript1.js"></script>

CSS:

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 50px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    background-color: #ffc;
    opacity: 0.85;
}

.next{
    padding: 18px 0px 18px 22px;
    border-radius: 0 50% 50% 0;
    right: 5px;
    margin-top: 190px;
    margin-right: 40%;
}

.prev{
    padding: 18px 22px 18px 0px;
    left: 5px;
    border-radius: 50% 0 0 50%;
    margin-top: +190px;
    margin-left: 40%;
}

.pic{
    height: 500px;
    position: relative;
    border-radius: 20px 20px 20px 20px;
    padding-bottom: 50px;
}

So what should I put to that pictures[] to make it more dynamic? Or how can I solve this?

Answer 1

Hope this helps:

const nextArrow = document.querySelector(".next");
const prevArrow = document.querySelector(".prev");
const pictures = document.querySelectorAll(".my-slides");

let position = 0;
pictures[position].style.display = "block";

function hideIMG() {
  pictures[position].style.display = "block";
  for (let i = 0; i < pictures.length; i++) {
    if (i !== position) pictures[i].style.display = "none";
  }
}

function control() {
  if (position >= 0 && position < pictures.length) {
    hideIMG();
  } else if (position === pictures.length) {
    position = 0;
    hideIMG();
  } else {
    position = pictures.length - 1;
    hideIMG();
  }
}

nextArrow.addEventListener("click", () => {
  position++;
  control();
});

prevArrow.addEventListener("click", () => {
  position--;
  control();
});

// Auto slide
setInterval(function() {
  position++;
  control();
}, 3000);

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 50px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
  background-color: #ffc;
  opacity: 0.85;
}

.next {
  padding: 18px 0px 18px 22px;
  border-radius: 0 50% 50% 0;
  right: 5px;
  margin-top: 190px;
  margin-right: 40%;
}

.prev {
  padding: 18px 22px 18px 0px;
  left: 5px;
  border-radius: 50% 0 0 50%;
  margin-top: +190px;
  margin-left: 40%;
}

.pic {
  height: 500px;
  position: relative;
  border-radius: 20px 20px 20px 20px;
  padding-bottom: 50px;
}

.my-slides {
  display: none;
}

<div class="main-slideShow-div">
  <div class="slideshow-container">
    <div class="my-slides">
      <img class="pic" src="https://source.unsplash.com/HXJkqHexaak/" />
    </div>

    <div class="my-slides">
      <img class="pic" src="https://source.unsplash.com/ZHOVv_E8xZc" />
    </div>

    <div class="my-slides">
      <img class="pic" src="https://source.unsplash.com/z-lNmXoXt-k" />
    </div>

    <img class="prev" src="https://i.sstatic.net/glpn7.png" alt="leftArrow" />
    <img class="next" src="https://i.sstatic.net/1NNaT.png" alt="rightArrow" />

    <div class="slider-div" style="text-align: center">
      <div id="lines" class="line"></div>
      <div id="lines2" class="line"></div>
      <div id="lines3" class="line"></div>
    </div>
  </div>
</div>