The JS code for my Tailwind Image Slider won't work :/

Question

I am new to the whole coding topic. For my first "big" project I want to build a simple website with some functionality. I tried to implement an Image slider with Tailwind and JS. But the Code won't work. Thank you for all your help in advance <3screen HTML and Tailwind:

 <section>
      <div>
        <div class="relativ h-50 relative">
          <ul id="slider">
            <li class="relativ scale-50">
              <img class="h-full w-full object-fill" src="./img/test.png" alt="" />
            </li>
            <li class="relativ hidden h-[50vh]">
              <img class="h-full w-full object-fill" src="./img/logo1.png" alt="" />
            </li>
            <li class="relativ hidden h-[50vh]">
              <img class="h-full w-full object-fill" src="./img/test.png" alt="" />
            </li>
          </ul>
          <div class="absolute top-1/2 -translate-y-1/2 w-full  px-5">
            <div class="my-auto flex w-full justify-between ">
              <button onclick="prev()" class="rounded-full bg-slate-500 bg-opacity-80 p-3 shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                </svg>
              </button>
              <button onclick="next()" class="rounded-full bg-slate-500 bg-opacity-80 p-3 shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

JS:

// Image slider
currentSlideId = 1;
sliderElement = document.getElementById('slider');
totalSlides = sliderElement.childElementCount;



function next (){
  if(totalSlides<currentSlideId){
    currentSlideId++;
    showSlide();
  }
  
}

function prev(){
  if(currentSlideId > 1){
    currentSlideId--;
    showSlide();
  }
}

function showSlide(){
  slides = getElementById('slider').getElementsByTagName('li');
  for (let index = 0; index < totalSlides; i++){
    const element = slide[index];
    if(currentSlideId===index+1){
      element.classList.remove('hidden')
    }else{
      element.classList.add('hidden')
    }
  }
}

I tried to edit my code but it won't work :/

Answer 1

First, welcome to stack overflow.

I think the problem is in the showSlide function inside the for loop, wherein the 'element' variable you wrote:

slide[index]

But I think it should be:

slides[index]

Because there is no variable in that name.

And also like @BestCoderBoy commended, it's always good to initialize a variable before using it, and it looks like you're using getElementByID without the document.