Простой слайдер на CSS
∘CSS
на главную сниппетов Правильная ротация получается благодаря z-index. А всё остальное по времени привязывается к одной переменной --time. И оказалось, не так и сложно сделать и для большего количества картинок)
<![CDATA[
<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>
]]>
на главную сниппетов
