如何在一个页面中多次重复使用一块Javascript

Question

I'm new to building websites and have a (probably quite basic) question about using a Javascript function that's been written for a slideshow. I have a one-page website which uses multiple slideshow units – made up of the slideshow div, holder and a counter (eg 1/4), all of which is controlled by the following 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()
  }

})

My set up in HTML is this:

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

And so on. I have 12 slideshows in total on the same page. The problem I'm encountering is that the script applies globally across the whole page but I'd like to control each slideshow independently of each other. Is there a way to reuse this script and apply it separately to each instance of the slideshow?

Thanks for your help!

Answer 1

You can use JavaScript Functions or Classes.

W3Schools Reference Functions

W3Schools Reference Classes

Answer 2

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

With this you are applying change to all of the elements.

Judging by your code, you can trigger the event listener to change the slides only to the child elements of the parent element( section ) which has id of "project-X". Have a look here