在 window 调整大小时重置滑块 JavaScript（不是 jQuery）

Question

我不想要 jQuery 解决方案。

问题：调整页面大小时，滑块中的幻灯片位置不正确。

我愿意接受任何解决方案，但我想我需要在 window 调整大小时为我的 heroSlider 重置 JS。

这是JSfiddlehttps://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()

它在 fiddle 上看起来不太好，但您仍然可以看到它在调整大小时中断了。它适用于所有 window 尺寸，只要您刷新页面，但我不希望页面在所有尺寸调整后都刷新。

您可以在 http://www.justinkwapich.com/JH/index.html

看到真正的交易

非常感谢任何帮助，谢谢！

Answer 1

在您的 heroSlider() 函数中，您可以添加一个事件侦听器以检查 window 是否已调整大小并创建一个回调，您可以在其中更新 size 变量和任何其他依赖于这个尺寸：

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

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

在 window 调整大小时重置滑块 JavaScript（不是 jQuery）

Reset slider JavaScript upon window resize (NOT jQuery)

javascript

slider

reset

window-resize

carousel