Как сделать CSS анимацию слайдер

Рейтинг: 0Ответов: 1Опубликовано: 27.02.2023

Всем привет! Вопрос: Есть условный "слайдер" на сайте, все слайды в котором объединены в единый фрейм. Как с помощью 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";
}

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

css javascript html css-animation slider
Источник: Stack Overflow на русском

Ответы

▲ 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`)
}