Ответы пользователя по тегу React
  • Какая логика бесконечной повторяющейся карусели?

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