CSS图像幻灯片图像彼此相邻答案

【问题标题】：CSS image slideshow images next to each otherCSS图像幻灯片图像彼此相邻
【发布时间】：2018-12-13 19:00:13
【问题描述】：

我是一名学习基本 HTML 和 CSS 的学生。我创建了一个网站，其中包含我在数字艺术课上创建的作品集，并创建了一个简单的 CSS 幻灯片。目标是让每张图片都放在自己的幻灯片上，并让它自动滚动。现在，我调整了它们的大小，以便它们在选项卡最大化时适合，并且它们在一张幻灯片上都彼此相邻。这是 HTML：

@keyframes slider {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

#slider {
  overflow: hidden;
}

#slider figure img {
  width: 20%;
  float: left;
}

#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}

img {
  display: block;
  max-width: 5%;
  width: auto;
  height: auto;
}

<div id="slider">
  <figure>
    <img src="riley%20clipping%20mask%20again.jpg" style="width:10%;">
    <img src="pouya%20t%20shirt%20design.jpg" style="width:10%;">
    <img src="Bob%20ross%20is%20our%20lord%20-riley.jpg" style="width:10%;">
    <img src="Pos%20and%20neg%20riley.jpg" style="width:10%;">
    <img src="ben%20is%20trippy.jpg" style="width:10%;">
  </figure>

</div>

【问题讨论】：

标签： html css image slider slideshow

【解决方案1】：

非常简单。干得好。必须将您的数字更改为 div 并更改一些参数。

@keyframes slider {
  0% {
    margin-left: 0;
  }
  20% {
    margin-left: 0;
  }
  25% {
    margin-left: -100%;
  }
  45% {
    margin-left: -100%;
  }
  50% {
    margin-left: -200%;
  }
  70% {
    margin-left: -200%;
  }
  75% {
    margin-left: -300%;
  }
  95% {
    margin-left: -300%;
  }
  100% {
    margin-left: -400%;
  }
}

#slider {
  overflow: hidden;
  margin: 0 auto;
}

#container img {
  width: 20%;
  float: left;
}

#container {
  position: fixed;
  width: 500%;
  margin: 0;
  top: 50%;
  left: 50%;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}

img {
  display: block;
  float: left;
  width: auto;
  height: auto;
}

<div id="slider">
  <div id="container">
    <img src="riley%20clipping%20mask%20again.jpg">
    <img src="pouya%20t%20shirt%20design.jpg">
    <img src="Bob%20ross%20is%20our%20lord%20-riley.jpg">
    <img src="Pos%20and%20neg%20riley.jpg">
    <img src="ben%20is%20trippy.jpg">
  </div>
</div>

【讨论】：