Лёгкий и простой слайдер изображений основанный на правилах @keyframes в CSS анимации. Вообщем нашёл этот слайдер
на codepen и выкладываю сначала ссылку на Источник чтобы увидели
исходный код и Демо.
Слайдер не будет нагружать сайт, в изначальном варианте сделан под 5 изображений и в стилях заметьте будет занимать
весь обьём контента или блока исходя из пропорций картинок (Responsive), так что применяйте изображения одинакового размера.
Ниже я предлагаю немного переделанный код, мне просто понравилась идея сделать мини слайдер в боковом блоке сайта.
В этом мини слайдере я лишь добавил размеры, переход по ссылкам и функцию alternate, чтобы анимация слайдов возвращалась а не начиналась сначала. Размеры можно убрать совсем, просто тестировал с изображениями разных размеров с кинопоиска)
Код
<div class="slider">
<figure>
<a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/9/kinopoisk.ru-The-Legend-of-Tarzan-2792824.jpg" alt=""></a>
<a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/9/kinopoisk.ru-Jack-Reacher_3A-Never-Go-Back-2796989.jpg" alt=""></a>
<a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/9/kinopoisk.ru-Arrival-2796426.jpg" alt=""></a>
<a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/5/kinopoisk.ru-Warcraft-2752026.jpg" alt=""></a>
<a href="https://www.kinopoisk.ru/posters/"><img src="https://st.kp.yandex.net/im/poster/2/7/9/kinopoisk.ru-The-Legend-of-Tarzan-2792824.jpg" alt=""></a>
</figure>
</div>
Код
<style>
@keyframes slidy {
0% {left: 0%;}
20% {left: 0%;}
25% {left: -100%;}
45% {left: -100%;}
50% {left: -200%;}
70% {left: -200%;}
75% {left: -300%;}
95% {left: -300%;}
100% {left: -400%;}
}
.slider {overflow: hidden; margin: 0; width: 285px;}
.slider figure img {width: 20%; float: left; height: 410px;}
.slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite alternate;
}
</style>