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

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

<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>

This the link to my full code: https://codepen.io/Axolotles/pen/vYaNXXO

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

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：

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!

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：

if anyone need to see the code: this is the JS code from the codepen that he sent, NEXT TIME add the code to here

<script>
  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();


</script>

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>