Простой слайдер изображений

Итак, для изготовления слайдера нам понадобится: щепотка html, щепотка css, заранее подготовленные изображения (размер желателен одинаковый).

Для начала накидаем стиль:

<style>
@keyframes slidy { /*в моём случае — картинок всего 4*/
0% {left: 0%;} /*если у вас их будет больше или меньше*/
14.27% {left: 0%;} /*добавляйте на каждую ещё по 2 шага*/
28.57% {left: -100%;} /*ну, или убавляйте =)*/
42.86% {left: -100%;} /*не забудьте только проценты поделить*/
57.14% {left: -200%;} /*на количество шагов*/
71.43% {left: -200%;} /*и дописать в скобках, согласно количества*/
85.71% {left: -300%;} /*изображений, которые вы используете*/
100% {left: -300%;}
}
.slider {overflow: hidden; margin: 0; width: 100%;}
.slider figure img {width: 25%; float: left; height: 100%;} /*тут у меня 25%, опять же потому что картинки — 4 (100%/4)*/
.slider figure { 
position: relative;
width: 400%; /*4 изображения по 100% ширины (4*100%)*/
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 14s slidy infinite alternate; /*тут указываем общее время анимации*/
}
</style>

Потом дописываем html:

<div class="slider">
<figure>
<a href="/"><img src="/images/2023/03/24/00/00.jpg" alt=""></a>
<a href="/"><img src="/images/2023/03/24/00/01.jpg" alt=""></a>
<a href="/"><img src="/images/2023/03/24/00/02.jpg" alt=""></a>
<a href="/"><img src="/images/2023/03/24/00/03.jpg" alt=""></a>
</figure>
</div>

Пример работы: