I built a javascript gallery (no libraries) for presentation slides as images. prev/next buttons should cycle through the array regardless of its size. Desired bevavior Next button: 1,2,3,4,5,0,1,2... Prev button: 5,4,3,2,1,0,5,4...

Issues

1. change in count doesn't always change the image
2. "previous" button decrementing goes up first, and displays a -1
3. I have to call the "next" button function onl oad, otherwise two clicks are needed to start the images changing. I'd prefer to preload the gallery with image 0 via html or an inital function.

Please take a look https://codepen.io/cnote/pen/gOKdpxr Thank you

I tried starting with images[0] loaded, but that requires 2 initial clicks for the buttons to work. I've tried reworking the logic in the functions, but I'm bad at this.

var currentImage = 0;
var images = [];

images[0] = "https://chrismichaelides.com/img/test0.jpg";
images[1] = "https://chrismichaelides.com/img/test1.jpg";
images[2] = "https://chrismichaelides.com/img/test2.jpg";
images[3] = "https://chrismichaelides.com/img/test3.jpg";
images[4] = "https://chrismichaelides.com/img/test4.jpg";

function nextImage() {
  document.getElementById("deckImage").src = images[currentImage  ];
  document.getElementById("deckNumber").innerHTML = currentImage   " of "   images.length;
  console.log("slide = "   currentImage);

  //start over
  if (currentImage >= images.length) {
    currentImage = 0;
    console.log("slide = "   currentImage);
  }
}

function prevImage() {
  document.getElementById("deckImage").src = images[currentImage--];
  document.getElementById("deckNumber").innerHTML = currentImage   " of "   images.length;
  console.log("slide = "   currentImage);

  //cycle backwards to last from first
  if (currentImage < 0) {
    currentImage = images.length - 1;
    console.log("slide = "   currentImage);
  }
}

CodePudding user response：

I am happy to help you.

To be honest I don't know what was the problem in code but I have a solution which I think will suit you.

I have changed functions to following:

function nextImage() {
  currentImage = (currentImage   1   images.length) % images.length;
  document.getElementById("deckImage").src = images[currentImage];
  document.getElementById("deckNumber").innerHTML =
    (currentImage   1)   " of "   images.length;
  console.log("slide = "   currentImage);
}

function prevImage() {
  currentImage = (currentImage - 1   images.length) % images.length;
  
  document.getElementById("deckImage").src = images[currentImage];
  document.getElementById("deckNumber").innerHTML =
    (currentImage   1)   " of "   images.length;
  console.log("slide = "   currentImage);
}

Which can even be writen as:

function nextImage() {
  cycle(1);
}

function prevImage() {
  cycle(-1);
}

function cycle(direction) {
    currentImage = (currentImage   direction   images.length) % images.length;
  
  document.getElementById("deckImage").src = images[currentImage];
  document.getElementById("deckNumber").innerHTML =
    (currentImage   1)   " of "   images.length;
  console.log("slide = "   currentImage);
}

I hope this solution is acceptable by You.

If you have additional questions or this solution is not suitable for you, describe your case so I can suggest a better one.

Best regards

PS: I am new here - if I made something wrong please point me that out

CodePudding user response：

Łukasz Ł's rewrite of my functions allowed me to remove any onl oad calls and use html to set the first image. It also got around the need to reset the count, and added math to the inner.html solving for the displayed image number. Very elegant.

CodePudding user response：

I have modified your code quite a lot but I have tried to keep your logic as much as possible. Instead of using an array of images and then array.length, I have hardcoded 3 into the code which represents 4 images (0, 1, 2 and 3).

// You have 4 images: 0, 1, 2 and 3

var currentImage = 0;

function nextImage() {
  currentImage  ;
  //start over
  if (currentImage >= 4) {
    currentImage = 0;
  }
  console.log("slide = "   currentImage);
}

function prevImage() {
  currentImage--;
  //cycle backwards to last from first
  if (currentImage < 0) {
    currentImage = 3;
  }
  console.log("slide = "   currentImage);
}

const prev = document.querySelector('#prev');
const next = document.querySelector('#next');

console.log("slide = "   currentImage);

prev.addEventListener('click', function(){
  prevImage();
});

next.addEventListener('click', function(){
  nextImage();
});

<button id='prev'>Prev</button>
<button id='next'>Next</button>