Задать вопрос
TheSnegok
@TheSnegok

Какая логика бесконечной повторяющейся карусели?

Видел карусели с слайдами, и доходя до последнего и переключая на следующий, они не возвращаются в начало, а идут дальше только начиная с первого слайда, интересна логика такой карусели, они создают каждый раз новые картинки карусели или может как-то в css можно сделать анимацию чтобы повторялось всё по кругу?
  • Вопрос задан
  • 87 просмотров
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
Siteyoda
@Siteyoda
frontend-developer
Используется рамка, в которой размещается один элемент карусели (как правило, он является картинкой). Задается свойство overflow: hidden, что скрывает все за пределами границ элемента (то есть элементов, например, восемь, они все восемь существуют, перемещаются вправо и влево при кручении, но отображается только тот, который в этой зоне видимости). Далее элементы, например, если пользователь нажал кнопку 'влево', перемещаются влево и, когда последний элемент доходит и встает в зону отображения блока, в которой мы указали overflow: hidden, создается клон всего слайдера (то есть клон всех элементов в виде такой же строки, который встает сразу за последним элементом оригинального слайдера). После, когда пользователь нажимает кнопку 'влево' оригинальный слайдер смещается влево, а за ним следует клон, первый элемент которого встает на место видимости и впоследствии мы удаляем тот слайдер, который вышел за пределы (он был оригинальным) и также удаляем клон, ставим на его место оригинальный слайдер. Также работает и с логикой кручения вправо).
Вообще, делая бесконечный слайдер можно сделать переменную, которая будет содержать длину картинки в слайдере и в функции кручения надо увеличивать или уменьшать margin/padding, задав блоку слайдера Position: relative.
А вообще, посоветую канал на ютубе, там хорошо объясняется интересующий тебя вопрос https://www.youtube.com/watch?v=gBgD9ieCJpE&t=623s...
Там, правда, только вправо крутит, но додумаешь как надо и влево сделать, я написал тебе основную логику)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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