Create Overlay Slideshow for 4 Photos by receiving the first photo ID number.

createSlide.JS

const createSlide = (imgId) => {
  const divE = document.createElement('div')
  divE.innerHTML = '<div></div>'
  divE.id = 'slide'
  screenE.appendChild(divE)

  const slideE = document.querySelector('#slide > div')
  const slideUL = document.createElement('ul')
  for(let i = 0; i < 4; i++) {
    const liE = document.createElement('li')
    liE.style.backgroundImage = 'url(\'images/photo.' + (Number(imgId) + i) + '.png\')'
    slideUL.appendChild(liE)
  }
  slideE.appendChild(slideUL)

  const slideWidth = slideUL.children[0].getBoundingClientRect().width
  let reqId = 0
  let scrollSpeed = slideWidth / 9
  let initLeft = 0
  let isStarted = false
  const autoScroll = () => {
    slideE.scrollLeft = slideE.scrollLeft + scrollSpeed
    reqId = window.requestAnimationFrame(autoScroll)
  }
  
  const endLeft = slideWidth * (Number(slideUL.children.length) - 1)
  slideE.addEventListener('click', (e) => {
    if(isStarted === true) {return false}
    isStarted = true
    initLeft = slideE.scrollLeft
    if(initLeft === endLeft && slideE.scrollLeft === endLeft){
      const removeE = document.querySelector('#slide')
      removeE.parentNode.removeChild(removeE)
    } else {
      autoScroll()
    }
  })
  
  slideE.addEventListener('scroll', (e) => {
    if(Math.abs(initLeft - slideE.scrollLeft) > slideWidth - scrollSpeed) {
      window.cancelAnimationFrame(reqId)
      slideE.scrollLeft = Math.abs(initLeft + slideWidth)
      isStarted = false
    }
  })
}