Для настройки плавного перемещения метки при клике на стрелки слайдера 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, если требуется более сложное движение метки.