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

#css #css_animation

Быстрый вопрос, - есть страница, на которой картинки должны меняться по таймеру,
за счет наслоения на предыдущую. Вот мой код, но там есть только первая анимация.  



.wrapper {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

#slide {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 5s, 3s;
  animation: slide 0.5s forwards;
  animation-delay: 5s, 3s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide {
  100% {
    left: 0;
  }
}

@keyframes slide {
  100% {
    left: 0;
  }
}

#slide2 {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 5s, 3s;
  animation: slide 0.5s forwards;
  animation-delay: 5s, 3s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide2 {
  100% {
    left: 0;
  }
}

@keyframes slide2 {
  100% {
    left: 0;
  }
}

#slide3 {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 5s, 3s;
  animation: slide 0.5s forwards;
  animation-delay: 5s, 3s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slide3 {
  100% {
    left: 0;
  }
}

@keyframes slide3 {
  100% {
    left: 0;
  }
}

  
  
  




    

Ответы

Ответ 1

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



: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%; }
}