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 ответов

6 просмотров

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

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

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

Всем привет, написал код ниже, но он выдает сегфолт, в чем причина? #include <stdio.h> #include <stdlib.h> #include <string.h> struct product { char *name; float price; };...
buzz базз
32
Хотел бы спросить у знающих, правильную ли я выбрал книгу для начала изучения ассемблера Юрова В.И ? Или есть более лучшие книги для начала обучения?
Botsman
25
Книга Юрова В.И пойдёт для обучения?
Botsman
24
$params = [ 'formid' => 'feedbackForm', 'formTpl' => '@CODE: <form class="form-validate" data-id="ajax_form"> <fieldset class="margin-bottom-md"> ...
Pathologic
1
> Примечательно, что новый владелец удаляет из GitHub любые жалобы, указывающие на подозрительную активность или смену владельца, и, видимо, рассчитывает на то, что пользовате...
Alex Sherbakov
1
Hey there Which is the best Linux destro for developers (coding)? To my research on reddit, they said Linux mint is good for mid level spec and Ubuntu for high Lev hardwar...
Wiz 🪄
11
И ещё вопрос: можно ли типа как на дос как-то запариться и с помощью прерываний выводить текст, вместо функции printf ?
НѣкъиⰘижєжєиꙁъвьсєсвѣтьноѣсѣтиѥсть•
34
а мы ещё не созрели до того, чтобы создать отдельный чатик про настройку редакторов?
Cheese Syrowiecki
16
Всем привет! У меня почему-то по-разному отображается TListView в Debug и Release режимах (FireMonkey)! При запуске под Win приложения TListView заливается программо. в Debug ...
Александр COM
8
Ладно, ещё тупого спрошу. Код должен банально вывести значение регистра на консоль, на деле же не выводя ничего, просто оставляя нерабочую консоль (открыта, ничего не написан...
НѣкъиⰘижєжєиꙁъвьсєсвѣтьноѣсѣтиѥсть•
25
Карта сайта