Infinity animation slider using HTML & CSS || Как сделать анимированный бесконечный слайдер CSS

Всем привет!

В этом видео вы узнаете, как сделать бесконечный слайдер, используя HTML и CSS анимации шаг за шагом.

Если вам понравится данное видео, пожалуйста, поставьте лайк и напишите комментарий в поддержку.

Это способствует развитию канала.

А также можете поддержать автора донатом.

Ссылка вверху справа.

Спасибо и приятного просмотра!

Итак, приступим к созданию адаптивного бесконечного слайдера, используя HTML и CSS-анимации шаг за шагом.

У нас есть файл index.html, style.css, стили подключены, также подключены шрифты, и в стилях добавлены простые обнуляющие стили.

Теперь давайте внутри в body добавим разметку, создадим блок с названием класса Slider, внутри него у нас будет размещаться блок с названием класса

Слайдер контейнер.

И там у нас будет размещаться блок с названием класса слайд.

Куда мы добавим тег img.

Из папки img выберем первое изображение.

Альтернативный текст можно убрать.

И сразу для изображения здесь мы можем задать ширину.

Укажем width 250 и высоту height 100.

Теперь давайте этот блок скопируем ниже еще 6 раз.

Выделяем этот блок, зажимаем Shift Alt и стрелочку вниз.

И считаем.

1, 2, 3, 4, 5, 6.

И в этом блоке SliderContainer у нас получается 7 таких вот блоков с названием класса Slide.

Здесь нам нужно заменить изображение.

В папке MG выбираем.

второе изображение здесь третье четвертое пятое шестое и седьмое теперь нам нужно слайды выделить всем этих элементов и скопировать еще один раз чтобы их получилось у нас

14 и они были одинаковыми, то есть 7.

И такие же будут 7 блоков.

Нажимаем Shift Alt и нажимаем стрелочку вниз.

И по итогам у нас получается 14 таких элементов.

Давайте откроем страницу в браузере, посмотрим, что у нас добавилось.

Итак, как мы видим, у нас есть вот такие вот изображения.

Давайте свернем браузер и Visual Studio Code.

Перейдем в стили.

В стилях нам нужно обратиться к блоку с названием класса Slider.

И для него укажем высота будет 100 пикселей.

Размещение укажем по центру.

Margin 0 и Auto 0.

Вот тут сверху и снизу автоматическое размещение справа и слева.

Overflow укажем Hidden, чтобы скрыть переполнение.

Добавим Position Relative.

Добавим относительное позиционирование.

Затем нам нужно обратиться к слайдер и добавить псевдоэлемент before и через запятую также обращаемся к слайдер и псевдоэлемент after.

И добавим такие два элемента, чтобы с левой и с правой стороны они были полупрозрачными.

Для этого добавим background, укажем функцию linear gradient.

И туда укажем направление Tool Right с правой стороны.

И добавим белый цвет, будет 0%.

И также укажем функцию FGB 255.255.255 с затемнением на 0.

И здесь укажем 100%.

Теперь нам также нужно добавить еще Content.

Свойство оно будет пустое.

Также добавим Position Absolute.

Абсолютное позиционирование.

Ширина у элемента будет 200 пикселей.

Высота будет 100 пикселей.

И Z Index укажем 2, чтобы оно перекрывало остальные элементы.

Теперь нам нужно обратиться к Slider и псевдоэлементу After.

И указать размещение.

Укажем Right.

0, top 0.

Прижмем к правой части и к верху и также добавим transform rotate z на 180 градусов.

И также обратимся к слайдер и псевдоэлементу before и его прижмем к левой части и к верху.

Left 0, top 0.

Затем нам нужно обратиться к слайдер и к слайд-контейнер.

И сюда нам нужно указать Display Flex.

Размещение элементов один за одним, как мы видим.

Теперь они вот таким вот образом размещаются.

И здесь у нас есть такое полупрозрачное замутнение для этих элементов.

элементов псевдоэлементов before и after с левой и с правой стороны также нам нужно еще указать здесь ширина ширину выберем функцию calc и укажем 250 пикселей умножить на 14 поскольку у нас идет 14 элементов которые мы добавляли в разметку и также добавим свойство animation объединенное свойство

Дадим название для анимации Move, движение.

30 секунд будет продолжительность, будет скорость линейная.

И укажем Infinite, она будет бесконечная.

Теперь также нам нужно обратиться к Slider и к элементу Slide.

И для него укажем ширина 250 пикселей и высота 100 пикселей.

И теперь нам нужно эту анимацию запустить.

Добавляем.

правило keyframes вместо identifier отсюда копируем название анимации move вставляем сюда и указываем наши ключевые кадры 0% укажем transform translate x смещение по оси x это по горизонтали укажем 0 и следующий ключевой кадр будет 100% от 0 до 100 сюда укажем также

transform трансформацию translate x смещение по горизонтали и туда укажем функцию calc минус 250 пикселей умножить на все и теперь у нас вот запустился наш бесконечный слайдер и он у нас движется в левую сторону как мы видим

течение 30 секунд он у нас перемещается в левую сторону и можно обратить внимание на то что у слайдера нет скачков все просто движется равномерно бесконечно в левую сторону если у нас стоит задача

Поменять направление, то есть мы хотим, чтобы эти элементы двигались не в левую сторону, а в правую.

Что нам нужно сделать?

Нам нужно здесь поменять в ключевых кадрах значение.

Давайте отсюда.

Нажмем Ctrl-X, вырежем этот элемент, вставим его к нулевому ключевому кадру.

А этот элемент, свойства и значения, вставим к нулевому.

И теперь у нас как мы видим элементы движутся в правую сторону.

Также бесконечно, также равномерно и также без каких-либо скачков.

Итак в этом видео мы узнали как сделать бесконечный слайдер.

движется либо в левую либо в правую сторону также давайте еще посмотрим как он адаптируется нажмем посмотреть код и начнем сужать ширину области просмотра как мы видим все также адаптивно подстраивается если например мы сужаем и мы видим что у нас вот это вот замутнение слишком большое здесь мы можем изменить например ширину его не

200 пикселей, а укажем допустим 100 пикселей.

И теперь оно будет вот.

Для меньше ширины области просмотра можно как бы его подправить, чтобы замутнение было с этой, с правой и с левой стороны, поменьше по ширине.

Таким вот образом получилось сделать такой вот бесконечный слайдер.

Итак, на этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк.

И подписывайтесь на мой канал.