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!

score 1 · Accepted Answer · answered Dec 06 '20 at 17:40

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

answered Dec 06 '20 at 17:40

Zsolt Meszaros

21,961
19
54
57

Thank you. I had to add a new slide to make this work properly, but this helped a lot. Much appreciated. – Justin Dec 06 '20 at 21:01
It seems to be working on the live site now. I'm glad it worked, not sure why you need an extra slide though. Anyway, I'd appreciate if you could accept this answer if it helped you solve your problem :) – Zsolt Meszaros Dec 06 '20 at 21:07

Reset slider JavaScript upon window resize (NOT jQuery)

1 Answers1