Why do I keep getting 4 slides when there are only 3 div elements?-CodePudding

I created a slideshow with 3 slides but for some reason, it keeps adding an additional slide

const slideshow = document.getElementById("slideshow");
const slides = slideshow.children;
let currentSlide = 0;

function goToSlide(n) {
  slides[currentSlide].classList.remove("active");
  currentSlide = (n   slides.length) % slides.length;
  slides[currentSlide].classList.add("active");
  updateSlideshowCounter();
}

function nextSlide() {
  goToSlide(currentSlide   1);
}

function prevSlide() {
  goToSlide(currentSlide - 1);
}

function updateSlideshowCounter() {
  const slideshowCounter = document.getElementById("slideshow-counter");
  slideshowCounter.textContent = `${currentSlide   1} / ${slides.length}`;
}

const prevButton = document.getElementById("prev-button");
prevButton.addEventListener("click", prevSlide);

const nextButton = document.getElementById("next-button");
nextButton.addEventListener("click", nextSlide);

updateSlideshowCounter();

#slideshow {
  position: relative;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px black solid;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.slide.active {
  opacity: 1;
}

#slideshow-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

#prev-button,
#next-button {
  padding: 10px 20px;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

#prev-button {
  margin-right: 20px;
}

#next-button {
  margin-left: 20px;
}

#slideshow-counter {
  margin: 0 20px;
}

<div id="slideshow">
  <div >Slide 1</div>
  <div >Slide 2</div>
  <div >Slide 3</div>
  <div id="slideshow-controls">
    <button id="prev-button">Prev</button>
    <span id="slideshow-counter"></span>
    <button id="next-button">Next</button>
  </div>
</div>

Can someone tell me what my mistake is and how I can get 3 slides in the output instead of 4.

CodePudding user response：

You're defining your slides with the statement const slides = slideshow.children;. Your slideshow has a total of 4 direct children, so the counter is technically correct (see slide 1, slide 2, slide 3, and slideshow-controls).

One approach to get just the slides you want is to use const slides = document.getElementsByClassName("slide"). I hope this helps!

CodePudding user response：

The problem is your slides variable is not assigned to the correct list of elements, as the previous answer said, you should replace slideshow.children with either document.getElementsByClassName('slide') or document.querySelectorAll('.slide'), use any of the two.

By using slideshow.children, you're not getting .slide classes, you're getting all children of #slideshow.

So, your variable in line 67, should be as the following:

const slides = document.querySelectorAll('.slide');

const slides = document.getElementsByClassName('.slide');

CodePudding user response：

You should keep slideshow controls out of your slideshow div. I am attaching Code Below. Run it and check.

const slideshow = document.getElementById("slideshow");
const slides = slideshow.children;
let currentSlide = 0;

function goToSlide(n) {
  slides[currentSlide].classList.remove("active");
  currentSlide = (n   slides.length) % slides.length;
  slides[currentSlide].classList.add("active");
  updateSlideshowCounter();
}

function nextSlide() {
  goToSlide(currentSlide   1);
}

function prevSlide() {
  goToSlide(currentSlide - 1);
}

function updateSlideshowCounter() {
  const slideshowCounter = document.getElementById("slideshow-counter");
  slideshowCounter.textContent = `${currentSlide   1} / ${slides.length}`;
}

const prevButton = document.getElementById("prev-button");
prevButton.addEventListener("click", prevSlide);

const nextButton = document.getElementById("next-button");
nextButton.addEventListener("click", nextSlide);

updateSlideshowCounter();

#slideshowbox {
  position: relative;
  width: 400px;
  height: 300px;
}

#slideshow {
  position: relative;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px black solid;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.slide.active {
  opacity: 1;
}

#slideshow-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

#prev-button,
#next-button {
  padding: 10px 20px;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

#prev-button {
  margin-right: 20px;
}

#next-button {
  margin-left: 20px;
}

#slideshow-counter {
  margin: 0 20px;
}

<div id="slideshowbox">
  <div id="slideshow">
    <div >Slide 1</div>
    <div >Slide 2</div>
    <div >Slide 3</div>
  </div>
  <div id="slideshow-controls">
    <button id="prev-button">Prev</button>
    <span id="slideshow-counter"></span>
    <button id="next-button">Next</button>
  </div>
</div>

CodePudding user response：

Your slideshow div childs is throwing 4 because your 4th div is slideshow-controls. You may want to add -1 to the counter or redifine the way you make your div. Best of luck!