Привет. Хочу понять механизм слайдер на JS. Когда именно плавно картинка утекает

влево, и появляется другая.

Как это реализовано.
Находил в интернете код для слайдера.
Но так и не понял как работает изминение картинки.

Вот кусок кода слайдера из моего сайта

// функция для смены слайда
_slide = function (direction, activeItemIndex, targetItemIndex) {
var
directionalClassName = ClassName.ITEM_RIGHT,
orderClassName = ClassName.ITEM_PREV,
activeItem = _items[activeItemIndex], // текущий элемент
targetItem = _items[targetItemIndex]; // следующий элемент

var _slideEndTransition = function () {
activeItem.classList.remove(ClassName.ITEM_ACTIVE);
activeItem.classList.remove(directionalClassName);
targetItem.classList.remove(orderClassName);
targetItem.classList.remove(directionalClassName);
targetItem.classList.add(ClassName.ITEM_ACTIVE);
window.setTimeout(function () {
if (_config.isCycling) {
clearInterval(_interval);
_cycle();
}
_isSliding = false;
activeItem.removeEventListener('transitionend', _slideEndTransition);
}, _transitionDuration);
};

if (_isSliding) {
return; // завершаем выполнение функции если идёт процесс смены слайда
}
_isSliding = true; // устанавливаем переменной значение true (идёт процесс смены слайда)

if (direction === "next") { // устанавливаем значение классов в зависимости от направления
directionalClassName = ClassName.ITEM_LEFT;
orderClassName = ClassName.ITEM_NEXT;
}

targetItem.classList.add(orderClassName); // устанавливаем положение элемента перед трансформацией
_setActiveIndicator(activeItemIndex, targetItemIndex); // устанавливаем активный индикатор

window.setTimeout(function () { // запускаем трансформацию
targetItem.classList.add(directionalClassName);
activeItem.classList.add(directionalClassName);
activeItem.addEventListener('transitionend', _slideEndTransition);
}, 0);

},


Я так понимаю в этом коде просто классы добавляются.
А вся анимация уже прописна в CSS стилях?
Или есть функция плавного изминения, а я не вижу?

Я для себя раньше простой слайдер как делал.
Брал div внутри которого картинка ( делал ему width 200%, overflow: hidden)
при клике меняю url картинки которая скрыта и делаю двум картинкам position realtive
left 50%
но ущербно это как то выглядело.
Поэтму скачал вот слайдер.
Но хочется разобраться как делают красывый адаптивный слайдерю

Это старый код какой-то, но могу тебе сказать, что делается это примерно так: контейнер-слайдера с overflow:hidden, внутри контейнер-обёртка, внутри него слайдики. Один слайдик занимает 100% ширины контейнер-слайдера. Для изменения картинки двигаешь контейнер-обёртку на ширину одного слайдика влево или вправо с помощью css-transform или другим методом.