CODEWITHSUNDEEP
javascript
ST80
ST80

Reputation: 3903

Javascript How to display current image index and total amount of images

I have made an simple javascript image slider which works fine so far, but I need to add some kind of counter, which indicates the number of the current slide and the amount of total slides but I don't know how to solve that.

here is my script:

function imageSlider(){

  let sliderElm = document.querySelector(".image-slider");
  let sliderImg = sliderElm.querySelectorAll('img');

  for(var i = 0; i < sliderImg.length; i++) {
    // I GUESS I HAVE TO DO SOME KIND OF LOOP
  }

  let totalImages = sliderImg.length;
  let totalCounter = document.getElementById('totalImages');
  totalCounter.innerHTML = totalImages; 

  document.querySelector('.next').addEventListener('click', onNextClick);
  document.querySelector('.prev').addEventListener('click', onPreviousClick);

  function onNextClick(e) {
     let imgWidth = sliderElm.offsetWidth;
     sliderElm.scrollLeft += imgWidth;
  }

  function onPreviousClick() {
     let imgWidth = sliderElm.offsetWidth;
     sliderElm.scrollLeft -= imgWidth;
  }
}

imageSlider();

the basic html structure is:

<div class="image-slider">

  <img src="some/image.png" />
  <img src="some/image.png" />
  <img src="some/image.png" />

</div>
<div>
   <span id="currentImage"> </span> / <span id="totalImages"></span>
</div>

Can someone help me out

Upvotes: 0

Views: 1162

Answers (3)

junvar
junvar

Reputation: 11584

Create a currentImage variable to track which index you're at. Start it at 0, and increment or decrement it on each button click. Update the scrollLeft and the #currentImage element accordingly.

Other notes,

  • use element.textContent instead of element.innerHTML.
  • use plural var names for arrays (e.g. sliderImgs)
  • use querySelector instead of getElementById
  • use single quotes instead of double quotes in JS
  • Use obvious naming; e.g. initializeImageSlider is clearer than imageSlider which could mean a number of things.

function initializeImageSlider() {

  let sliderElm = document.querySelector('.image-slider');
  let sliderImgs = sliderElm.querySelectorAll('img');

  let currentImage = 0;
  let currentCounter = document.getElementById('currentImage');
  currentCounter.textContent = currentImage + 1;

  let totalImages = sliderImgs.length;
  let totalCounter = document.getElementById('totalImages');
  totalCounter.textContent = totalImages;

  document.querySelector('.next').addEventListener('click', onNextClick);
  document.querySelector('.prev').addEventListener('click', onPreviousClick);

  function onNextClick() {
    scroll(1);
  }

  function onPreviousClick() {
    scroll(-1);
  }

  function scroll(change) {
    currentImage = (currentImage + change + totalImages) % totalImages;
    let imgWidth = sliderElm.offsetWidth;
    sliderElm.scrollLeft = currentImage * imgWidth;
    currentCounter.textContent = currentImage + 1;
  }
}

initializeImageSlider();
.image-slider,
img {
  width: 300px;
  height: 300px;
}

.image-slider {
  overflow: hidden;
  display: block;
  outline: 1px solid;
  white-space: nowrap;
}
<div class="image-slider">
  <img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" />
  <img src="https://st.depositphotos.com/1428083/2946/i/600/depositphotos_29460297-stock-photo-bird-cage.jpg" />
  <img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg" />
</div>
<div>
  <span id="currentImage"> </span> / <span id="totalImages"></span>
</div>
<button class="prev">prev</button>
<button class="next">next</button>

Upvotes: 1

Vincent Menant
Vincent Menant

Reputation: 475

Store your current image index in a variable and edit it on prev/next click handlers

    let imageIndex = 1

function setCurrentImageIndex(index) { 
   imageIndex = index; 
   document.getElementById('currentImage').innerText = currentIndex; 
}


function onNextClick(e) {
     let imgWidth = sliderElm.offsetWidth;
     sliderElm.scrollLeft += imgWidth;
     setCurrentImageIndex(Math.min(totalImages, imageIndex + 1));
  }

function onPreviousClick() {
     let imgWidth = sliderElm.offsetWidth;
     sliderElm.scrollLeft -= imgWidth;
     setCurrentImageIndex(Math.max(imageIndex - 1, 1));
  }

Upvotes: 1

Jazzly
Jazzly

Reputation: 66

can't u use i as the counter? Because

for(var i = 0; i < sliderImg.length; i++) {
console.log(i) }

then u know the amount of images right? Because i got the value of the length

Upvotes: 0

Related Questions