Как реализовать вертикальный слайдер?
Есть контейнер div с overflow-y: hidden в нем слайдер с 3 вертикальными слайдами, jQuery генерирует и вставляет еще несколько слайдов перед этими тремя, то есть сверху и запускает слайдер добавляя класс active родительскому элементу.
Необходимо, чтобы после вставки этих слайдов слайды прокрутились от текущих трех (после вставки они стали последние в наборе) до первых трех в наборе. Для плавности может быть использована CSS анимация или переход (transition).
Как возможно такое реализовать?
let parent = $('.parent');
let column = $('.column');
column_0 = column[0];
column_0.prepend('<img src=img/test.png>');
column_0.prepend('<img src=img/test.png>');
column_0.prepend('<img src=img/test.png>');
column_0.prepend('<img src=img/test.png>');
column_0.prepend('<img src=img/test.png>');
parent.addClass('active');
.parent{
width: 100%;
height: 600px;
overflow-y: hidden;
}
img{
width: 200px;
height: 200px;
}
.parent .column{
/* ??? */
}
.parent.active .column{
transition: all 5s linear 0s;
/* ??? */
}
<div class="parent">
<div class="column">
<img src="">
<img src="">
<img src="">
</div>
</div>
`