0

Всем привет! Вопрос: Есть условный "слайдер" на сайте, все слайды в котором объединены в единый фрейм. Как с помощью CSS или JS сделать анимацию (чтобы по нажатию на кнопку NEXT к координатам фрейма со слайдами добавлялось значение, например (+100vw) и слайдер пролистывался дальше на это значение)?

Т.е. Учитывая текущее положение фрейма добавлять к нему значение перемещения в одну из сторон по нажатию кнопки NEXT (и отнималось это значение от текущего местоположение по нажатию кнопки PREV)

var button = document.querySelector(".button"),
      wrapper = document.querySelector(".slider-wrapper").style;

button.onclick = function(){
  wrapper.left = parseFloat(wrapper.left) + 1000 + "vw";
}

Пробовал такое для перемещения фрейма, не срабатывает(

1
  • Нужно создать переменные nextSlide= 1000; и prevSlide= -1000;. Потом при нажатии на левую кнопку отрабатывает wrapper.css("transform", "translate3d(" + prevSlide + "vw, 0, 0)"; и на правую nextSlide. Примерно так 28 фев в 7:16

1 ответ 1

0

Вот так работает перемещение блока в зависимости от его текущего положения -

CSS

    .sliderwrapper {
position: absolute;

  /* В переменной --x мы будем держать
    значение координаты по горизонтали;
    в переменной --y — по вертикали. */
  --x: 0vw;
  --y: 0vh;

  /* Укажем transform, значением которого
    передадим translate с указанными переменными.
    В итоге нам не придётся менять сам transform,
    мы сможем ограничиться лишь 
    изменением значений
    переменных --x и --y. */
    transition: transform .2s ease-in-out;
    transform: translate(var(--x), var(--y)); 
 
}

JS

document.querySelector("#button").onclick = function(){
const style = window.getComputedStyle(sliderwrapper)

  // Считываем значение каждой переменной через getPropertyValue:
  const translateX = parseInt(style.getPropertyValue('--x'))
  const translateY = parseInt(style.getPropertyValue('--y'))

  // Меняем текущее положение на необходимое значение
  startX = translateX - 100
  startY = translateY
  
  sliderwrapper.style.setProperty("--x", `${startX}vw`)
  sliderwrapper.style.setProperty("--y", `${startY}vh`)
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.