我是新的整个编码主题。我的第一个"大"项目，我想建立一个简单的网站与一些功能。我试图实现一个图像滑块与顺风和JS。但代码不会工作。谢谢你的所有帮助提前〈3 screen HTML和顺风：

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

联森：

// 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')
    }
  }
}

我尝试编辑我的代码，但它不起作用：/