Простой слайдер на CSS

20.08.19 12:43:17 20.08.19 12:48:43 113

Правильная ротация получается благодаря z-index. А всё остальное по времени привязывается к одной переменной --time. И оказалось, не так и сложно сделать и для большего количества картинок)

*Источник: ru.stackoverflow.com/questions/1015354/Простая-замена-картинок-на-странице-css

<style> :root { --time: 3s; /* Время одного пролистывания */ --qty: 4; /* Количество картинок */ } .wrapper { position: relative; width: 200px; height: 200px; overflow: hidden; box-shadow: 1px 1px 5px 1px #000; } .slide { position: absolute; width: 100%; height: 100%; left: -100%; animation: slide calc(var(--time) * var(--qty)) linear infinite; z-index: 0; } /* кусок задротства - придется редактировать для каждого кол-ва картинок */ .slide:nth-child(2) { animation-delay: var(--time) } .slide:nth-child(3) { animation-delay: calc(var(--time) * 2) } .slide:nth-child(4) { animation-delay: calc(var(--time) * 3) } @keyframes slide { 0% { z-index: 10; } 5% { left: 0; } 66% { left: 0; } 100% { left: -100%; } } </style> <div class="wrapper"> <img class="slide" src="http://via.placeholder.com/250x250/cc0000/fff?text=bubu" /> <img class="slide" src="http://via.placeholder.com/250x250/f36700/fff?text=kuku" /> <img class="slide" src="http://via.placeholder.com/250x250/045acf/fff?text=dudu" /> <img class="slide" src="http://via.placeholder.com/250x250/004400/fff?text=moo" /> </div>