Я создаю слайд-шоу с использованием ключевых кадров.

Моя проблема заключается в том, что на самом деле отображается только первое изображение, а остальные 4 просто игнорируются, как вы можете видеть в моем фрагменте.

Я просмотрел свой CSS и не думаю, что он «бесполезен» (поправьте меня, если есть что-то ненужное), и в противном случае я не уверен, почему изображения не отображаются.

Вот рабочий фрагмент того, что я сделал до сих пор:

carousel {
  max-width: 100%;
  height: 500px;
  max-height: 500px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: block;
}
carousel img {
  max-width: 100%;
  width: 1920px;
  height: auto;
  max-height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 20s ease-in-out infinite;
}
@keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: -500%;
  }
}
<carousel>
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
</carousel>
1
user4157770 30 Дек 2015 в 11:05

2 ответа

Лучший ответ

Вам нужно вручную вставлять одно изображение за другим, потому что у вас есть position: absolute, они находятся друг на друге, потому что left: 0

carousel {
  max-width: 100%;
  height: 500px;
  max-height: 500px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: block;
}
carousel img {
  max-width: 100%;
  width: 1920px;
  height: auto;
  max-height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 20s ease-in-out infinite;
}
carousel img:nth-child(2) {
margin-left: 100%;
}
carousel img:nth-child(3) {
margin-left: 200%;
}
carousel img:nth-child(4) {
margin-left: 300%;
}
carousel img:nth-child(5) {
margin-left: 400%;
}
@keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: -500%;
  }
}
<carousel>
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
</carousel>
0
Szymon 30 Дек 2015 в 08:23

Проблема в том, что вы позиционируете все изображения абсолютно в точках top: 0px, left: 0px контейнера (то есть все они расположены одно над другим), а также одновременно добавляете к ним одну и ту же анимацию. Из-за этого все изображения перемещаются из left: 0% в left: -500% одновременно, так что вы видите только одно изображение.

Я не совсем уверен, какого эффекта вы хотите достичь, поэтому дам вам два варианта. Если вам нужен эффект кинопленки, удалите position: absolute на carousel img, заставьте их отображаться в той же строке, используя white-space: nowrap на родительском элементе, а затем анимируйте родительский элемент {{X3} }.

carousel {
  max-width: 100%;
  height: 500px;
  max-height: 500px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  animation: slide 20s ease-in-out infinite;
}
carousel img {
  height: auto;
  max-height: 500px;
}
@keyframes slide {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -500%;
  }
}
<carousel>
  <img src="http://www.lorempixel.com/1920/1080/nature/1" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/2" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/3" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/4" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/5" alt="carousel-img">
</carousel>

Или, если вы хотите добиться эффекта, при котором каждое изображение размещается одно под другим, но они начинают двигаться только после того, как предыдущее изображение (то, что над ним) полностью сдвинулось, добавьте animation-delay к каждому элементу изображения, например что он равен времени, необходимому изображениям над ним, чтобы завершить свою анимацию. Также измените animation-duration на общее время, необходимое для завершения анимации всех 5 изображений.

carousel {
  max-width: 100%;
  height: 500px;
  max-height: 500px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: block;
}
carousel img {
  max-width: 100%;
  width: 1920px;
  height: auto;
  max-height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 100s ease-in-out infinite;
}
carousel img:nth-child(1){
  animation-delay: 80s;
}
carousel img:nth-child(2){
  animation-delay: 60s;
}
carousel img:nth-child(3){
  animation-delay: 40s;
}
carousel img:nth-child(4){
  animation-delay: 20s;
}
@keyframes slide {
  0% {
    left: 0;
  }
  20% {
    left: -100%;
  }
}
<carousel>
  <img src="http://www.lorempixel.com/1920/1080/nature/1" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/2" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/3" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/4" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/5" alt="carousel-img">
</carousel>
0
Harry 30 Дек 2015 в 08:47