我刚开始构建网站，对于如何使用为幻灯片编写的Javascript函数，我有一个（可能是相当基本的）问题。 我有一个单页网站，它使用多个幻灯片单元--由幻灯片div，保持器和计数器（例如1/4）组成，所有这些都由以下JS控制:

var currentSlide = 0
var totalSlides = $('.holder div').length

var nextSlide = function() {
console.log('nextSlide')
currentSlide = currentSlide + 1

if (currentSlide >= totalSlides) {
    currentSlide = 0
}

var leftPosition = (-currentSlide * 100) + 'vw'
$('.holder').css('left', leftPosition)

var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)
}


var prevSlide = function() {

  currentSlide = currentSlide - 1


if (currentSlide < 0) {
  currentSlide = totalSlides - 1
}


var leftPosition = (-currentSlide * 100) + 'vw'
$('.holder').css('left', leftPosition)

var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)

}

var autoSlide = setInterval(function() {
  nextSlide()
}, 100000000)

$('.next').on('click', function() {
  clearInterval(autoSlide)
  nextSlide()
})

$('.prev').on('click', function() {
  clearInterval(autoSlide)
  prevSlide()
})


var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)

$('body').on('keydown', function(event) {

  var keyCode = event.keyCode

  if (keyCode == 37) {
    clearInterval(autoSlide)
    prevSlide()
  }

  if (keyCode == 39) {
    clearInterval(autoSlide)
    nextSlide()
  }

})

我在HTML中的设置是这样的:

<main class="scroll-container">
         <section id="project-1" class="toxic-yellow">
         <div class="slideshow">
           <div class="holder">
             <div class="slide-1 image next"><img src="images/01.jpg"></div>
             <div class="slide-2 image next">
               <p class="project-text">
                 Project 1, 3D, 2020<br>
                 Insert the project text here insert the project text here insert the project text here insert the project text here insert the project text here
               </p>
             </div>
             <div class="slide-3 image next"><img src="images/05.jpg"></div>
             <div class="slide-4 image next"><img src="images/02.jpg"></div>
             <div class="slide-5 image next"><img src="images/04.jpg"></div>
             <div class="slide-6 image next"><img src="images/06.jpg"></div>
           </div>
         </div>
           <p class="caption">Project 1</p>
           <p class="steps"></p>
         </section>
         <section id="project-2" class="lilac">
         <div class="slideshow">
           <div class="holder">
             <div class="slide-1 image next"><img src="images/05.jpg"></div>
             <div class="slide-2 image next">
               <p class="project-text">
                 Project 1, 3D, 2020<br>
                 Insert the project text here insert the project text here insert the project text here insert the project text here insert the project text here
               </p>
             </div>
             <div class="slide-3 image next"><img src="images/05.jpg"></div>
             <div class="slide-4 image next"><img src="images/02.jpg"></div>
             <div class="slide-5 image next"><img src="images/04.jpg"></div>
             <div class="slide-6 image next"><img src="images/06.jpg"></div>
           </div>
         </div>
           <p class="caption">Project 2</p>
           <p class="steps"></p>
         </section>

等等。 我在同一页上总共有12张幻灯片。 我遇到的问题是，脚本在整个页面上都是全局应用的，但我希望控制每个幻灯片，而每个幻灯片都是相互独立的。 有没有一种方法可以重用这个脚本，并将它单独应用到幻灯片的每个实例中？

谢谢你的帮助！