Очень нужная функция на сайте, где происходит автоматическая смена изображение, здесь нет кнопок как на слайдере, что происходит на автомате и можно поставить на ресурсе где угодно.
Смотрим демо в песочнице
Код
<div class="fadein">
<img src="ссылка">
<img src="ссылка">
<img src="ссылка"> // количество картинок не ограниченное
</div>
CSS
Код
@keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}
.fadein { position:relative; width:70%;}
.fadein img { position:absolute; width:100%; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
