Как настроить перемещение метки при клике?

Как настроить плавное перемещение метки при щелчке на стрелки слайдера Slick для перехода между слайдами? Например, изначально метка находится в координатах top: 30px, left: 50px и при каждом клике перемещается на новые координаты, например, top: 100px, left: 80px и так далее, при этом каждый раз с разными значениями. При щелчке на кнопку "назад" метка должна снова перемещаться в обратном направлении.
  • 11 июля 2024 г. 17:32
Ответы на вопрос 1
Для настройки плавного перемещения метки при клике на стрелки слайдера Slick можно использовать методы анимации CSS или JavaScript. 

Пример настройки плавного перемещения метки с помощью JavaScript:

1. Создайте переменную для хранения текущих координат метки:
```js
let topValue = 30;
let leftValue = 50;
```

2. Напишите функцию, которая будет перемещать метку на новые координаты:
```js
function moveLabel(top, left) {
  $('.label').css({
    top: top + 'px',
    left: left + 'px'
  });
}
```

3. Добавьте обработчики событий для кнопок "вперед" и "назад":
```js
$('.next-btn').click(function() {
  topValue += 70; // увеличиваем значение top на 70 пикселей
  leftValue += 30; // увеличиваем значение left на 30 пикселей
  moveLabel(topValue, leftValue);
});

$('.prev-btn').click(function() {
  topValue -= 70; // уменьшаем значение top на 70 пикселей
  leftValue -= 30; // уменьшаем значение left на 30 пикселей
  moveLabel(topValue, leftValue);
});
```

4. Примените CSS для метки и кнопок:
```css
.label {
  position: absolute;
  top: 30px;
  left: 50px;
  transition: top 0.5s, left 0.5s; /* добавляем плавное перемещение */
}

.next-btn, .prev-btn {
  cursor: pointer;
}
```

Теперь, при клике на кнопку "вперед" или "назад", метка будет плавно перемещаться на новые координаты. Можно также настроить анимацию с помощью библиотеки jQuery UI, если требуется более сложное движение метки.
Похожие вопросы