Привет!
Помогите с реализацией анимации слайдера.
Есть вертикальный слайдер, контент подгружается из ajax.
Сейчас пока придумал через keyframes делать.
@keyframes top-images {
from {
top: 100%;
}
to {
top: 0;
}
}
@keyframes bottom-images {
from {
top: -100%;
}
to {
top: 0;
}
}
или вот так еще
@keyframes top-images {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
@keyframes bottom-images {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
но как-то не очень выходит. Как при использовании трансформа должно работать? Блоки друг под другом будут? Или друг за другом должны переключаться?
При нажатии на стрелку вперед генерируется доп блок с контентом, двум блокам задается одинаковый класс.
При нажатии на стрелку назад аналогично, только класс уже другой и анимации другие.
Так вот, с помощью каких свойств лучше сделать?
При этом слайды должны замещать друг друга выездом нового блока и скрытием предыдущего за пределами блока.
Средний
