Слайд-шоу с автоматическим переключением изображений на чистом HTML&CSS || Automatic SlideShow CSS

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

Итак, приступим к созданию слайд-шоу с автоматическим переключением изображений.

У нас есть файл index.html, есть стили, стили подключены.

И внутри бали создадим div с двумя классами.

Первый будет mid, сокращенно от middle, середина.

А второй будет называться слайдер.

Теперь переходим в стиле, обратимся к универсальному селектору, обнулим margin, padding, добавим свойства box-size, border-box.

Теперь обратимся к body, для него укажем background, будет у нас темного цвета.

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

Итак, мы видим, есть background, свернем браузер, половину и visual studio code также.

И здесь обратимся к div с классом.

Слайдер и для него укажем ширина 850 пикселей, высота 500 пикселей.

И добавим тень Box Shader 0.

Смещение по горизонтали 5 пикселей, по вертикали 10 пикселей.

Размытие и добавим RGBA 0.0.0.

И на 70% будет не прозрачность.

Мы видим есть блок с тенью.

Теперь давайте обратимся к диву.

классом нет и размещение сделаем этого элемента по центру вяжем позицию абсолютно 50 процентов в 50 процентов и transform translate минус 50 процентов , минус 50 процентов так мы видим элемент разместился по центру и давайте внутрь добавим изображение для этого мы вяжем background image url и возьмем изображение с

папке img первое изображение мы видим оно добавилось также нам нужно добавить background-size-cover и background-position будет центр так мы видим изображение разместилось внутри нашего блока теперь давайте добавим свойство animation название дадим animate и укажем скорость скажем так animation duration

время за которое будет проходить анимация укажем 60 секунд то есть одну минуту и бесконечная теперь обратимся к функции keyframes и добавим название наше и здесь укажем 10 процентов поскольку у нас будет 10 изображений мы будем выбирать от 10 процентов до 100 здесь нам нужно указать

background-image и возьмем второе изображение мы видим есть изменения и также добавим background-size-color теперь нам нужно скопировать этот элемент ставить его ниже и здесь меняем на 20 процентов а здесь на третье изображение и мы видим есть изменения меняется изображение у нас

опять копируем и так будем аж до 100 процентов здесь меняем на 4 здесь будет 40 процентов изображение 5 50 процентов 6

60 процентов 7 70 процентов 8 89 90

будет у нас 10 и 100 процентов будет первое так смотрим у нас идет слайд-шоу с плавным переключением изображений 10 изображений которые мы добавили и мы видим они сами меняются

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

Можем указать, к примеру, 40 секунд и изображения будут переключаться быстрее.

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

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

будет совсем быстрое переключение то есть за 20 секунд должно быть переключено вот этих вот 10 изображений которые мы добавили если мы например укажем 120 секунд то есть две минуты то будет совсем плавное переключение каждого из изображений то есть будет плавный переход от одного к другому таким вот образом

мы можем управлять вот этой вот скоростью.

Также здесь мы можем, если мы хотим, например, добавить не 10, а больше изображений, здесь мы меняем проценты.

К примеру, здесь можем указать 5, 10, 15, 20 и так далее.

Или же, если хотим добавить 5 изображений, мы можем оставить 5 блоков и будет 20%, 40, 60, 80 и 100.

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

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

На этом все.

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

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