Reset slider JavaScript upon window resize (NOT jQuery)

Question

I do not want a jQuery solution.

The problem: When my page is resized, the slides in the slider are positioned incorrectly.

I'm open to any solution, but my guess is I need to reset the JS for my heroSlider upon window resizing.

Here's the JSfiddle https://jsfiddle.net/3ou0ja4c/

// HERO SLIDER
const heroSlider = () => {
  const carouselSlide = document.querySelector('.carousel-slide')
  let carouselImages = document.querySelectorAll('.carousel-slide .slide-bg')

  // Buttons
  const prevBtn = document.querySelector('#prevBtn')
  const nextBtn = document.querySelector('#nextBtn')

  // Timer
  let interval = setInterval( () => rotateSlide(), 5000)

  // Counter
  let counter = 1
  let size = carouselImages[0].clientWidth

  carouselSlide.style.transform = 'translateX(' + (-size * counter ) + 'px)'

  const rotateSlide = () => {
    if (counter >= carouselImages.length -1) return
    carouselSlide.style.transition = "transform 0.4s ease-in-out"
    counter++
    carouselSlide.style.transform = 'translateX(' + (-size * counter ) + 'px)'
  }

  // Button Listeners
  nextBtn.addEventListener('click',() => {
    clearInterval(interval)
    rotateSlide()
  })

  prevBtn.addEventListener('click', () => {
    if (counter <= 0) return
    carouselSlide.style.transition = "transform 0.4s ease-in-out"
    counter--
    carouselSlide.style.transform = 'translateX(' + (-size * counter ) + 'px)'
    clearInterval(interval)
  })

  carouselSlide.addEventListener('transitionend', () => {
    // If image is a clone, jump to original image with no animation
    if (carouselImages[counter].id === 'lastClone'){
      carouselSlide.style.transition = "none"
      counter = carouselImages.length - 2
      carouselSlide.style.transform = 'translateX(' + (-size * counter ) + 'px)'
    }
    if (carouselImages[counter].id === 'firstClone'){
      carouselSlide.style.transition = "none"
      counter = carouselImages.length - counter
      carouselSlide.style.transform = 'translateX(' + (-size * counter ) + 'px)'
    }
  })
}

heroSlider()

It doesn't look great on the fiddle, but you can still see it breaks upon being resized. It works on all window sizes, so long as you refresh the page, but I DO NOT want the page to refresh upon all resizes.

You can see the real deal over at http://www.justinkwapich.com/JH/index.html

Any help is really appreciated, thank you!

Answer 1

In your heroSlider() function you can add an event listener to check if the window is resized and create a callback where you update the size variable and anything else that depends on this size:

let counter = 1
let size = carouselImages[0].clientWidth

window.addEventListener('resize', () => {
  size = carouselImages[0].clientWidth
  carouselSlide.style.transform = 'translateX(' + (-size * counter ) + 'px)'
  // ...
  // ...
})