Блог

Мне не нужно решение jQuery.

Проблема: при изменении размера моей страницы слайды в слайдере расположены неправильно.

Я открыт для любого решения, но я предполагаю, что мне нужно сбросить JS для моего heroSlider при изменении размера окна.

Вот 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()
 

Это не очень хорошо смотрится на скрипке, но вы все равно можете видеть, что он ломается при изменении размера. Он работает для всех размеров окна, если вы обновляете страницу, но я НЕ хочу, чтобы страница обновлялась при всех изменениях размера.

Вы можете увидеть реальную сделку по адресу http://www.justinkwapich.com/JH/index.html

Любая помощь действительно ценится, спасибо!

В вашей 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)'
  // ...
  // ...
})