169 похожих чатов

Привет. Хочу понять механизм слайдер на 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%
но ущербно это как то выглядело.
Поэтму скачал вот слайдер.
Но хочется разобраться как делают красывый адаптивный слайдерю

1 ответов

4 просмотра

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

Похожие вопросы

Обсуждают сегодня

@Aiwan что такое база образца?
Alexey
27
Не многие знают, а кто знает, тот уже успел забыть, что в далёком 2004 году эта игра произвела настоящий фурор, настолько революционной была технология, применяемая для её соз...
ICCID
4
Хотя у меня сейчас есть более сложная задача, вот её думаю: как объяснить челу переходного возраста противоположного полу, обучающегося в польском колледже (а-ля наш техникум)...
Вячеслав Кузьменко
15
коллеги, добрый вечер! А никто не знает как модальная форма может себя закрыть? Ну допустим модальная форма определила, что смысла ей работать нет и хочет вернуть modalResult...
Михаил
83
Добрый день Хочу начать обучение языку, не являюсь представителем it, буду благодарна за помощь, совсем пока не понимаю ничего) Подскажите, пожалуйста, где можно начать первы...
Sara Lala
30
верно что я могу удалить эти addq и subq т.к. со стеком никакого взаимодействия нет (исключая call)?
Michael
16
Hi Everyone! To all Are you Looking for Interview Support at the Lowest Price? Look no further! Then contact us We offer Interview Support for a low cost variety of technol...
Rambabu Nallamilli
3
средствами IBX как-то можно выполнить запрос insert ... returning?
Igor
31
всем привет. подскажите: вот по русски называется "прошивка для контроллера". или "бинарь" могут сказать. или "дамп". А как по английски это называется? Я хочу попытаться по...
Павлик Ливаткин
4
А если изначально бот работал так : есть сайт онлайн школы. У каждого ученика свой кабинет. Где он авторизуется по своим данным. И уже в кабинете, на самом сайте делает оплату...
Денис 💡 Фрилансер
13
Карта сайта