Очень нужен совет как выполнить данную задачу.
Вся сложность заключается в том, что круг который меняет содержимое на каждом слайде скорее всего должен быть один т.к траектория его движения должна быть видна:
от 1 слайда ко 2му: движение от верхнего левого угла к нижнему правому и т.д
-
Как понять - траектория его движения должна быть видна? – Stepan Kasyanenko 24 сен '18 в 5:52
-
При перелистывании от 1 слайда ко 2му: движение от верхнего левого угла к нижнему правому от 2 к 3: круг движется по горизонтали влево и немного вверх. Т.е задать анимацию перемещения – stiv 24 сен '18 в 6:10
1 ответ
Анимировать перемещение можно с помощью transition.
Посмотрите пример.
var circle = document.querySelector('.circle');
function gotoStep(step) {
const currentStep = circle.getAttribute('data-current');
if (currentStep !== undefined) {
circle.classList.remove('step' + currentStep);
}
circle.setAttribute('data-current', step);
circle.classList.add('step' + step);
}
.container {
position: relative;
width: 100%;
height: 400px;
border: 1px solid black;
}
.circle {
position: absolute;
border-radius: 50%;
border: 2px solid blue;
width: 40px;
height: 40px;
transition: top 2s, left 2s;
}
.circle.step0 {
top: 0;
left: 0;
}
.circle.step1 {
top: 50px;
left: calc(100% - 44px);
}
.circle.step2 {
top: 100px;
left: 50px;
}
<button onclick="gotoStep(0)">step 0</button>
<button onclick="gotoStep(1)">step 1</button>
<button onclick="gotoStep(2)">step 2</button>
<div class="container">
<div class="circle step0" data-current='0'></div>
</div>
-
я заметил что на самые сложные вопросы которые никто не может ответить отвечаете всегда вы браво .Поставил плюсь – Demon __ 24 сен '18 в 7:36
-
-
-
-
1@stiv Там должно быть событие, которое вызывается при смене слайда. Вот в этом событие устанавливайте нужный вам класс. – Stepan Kasyanenko 25 сен '18 в 11:25