无法在 HTML + CSS Slider 中添加图像答案

【问题标题】：Cannot add image in HTML + CSS Slider无法在 HTML + CSS Slider 中添加图像
【发布时间】：2016-11-09 14:21:05
【问题描述】：

我正在尝试通过在 HTML 中再添加一张图片来自定义给定 here 的滑块。

当我在 HTML 中添加图像并在 CSS 中进行相应更改时，代码会中断并且无法正常工作。

这是滑块的 HTML 代码：

/*Here is the CSS code: */

@keyframes slidy {
  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%;
  }
}

body {
  margin: 0;
}

div#slider {
  overflow: hidden;
}

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

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

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt>
    <img src="taj-mahal_copy.jpg" alt>
    <img src="ibiza.jpg" alt>
    <img src="ankor-wat.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
  </figure>
</div>

我尝试在<figure> 中添加图像，但滑块停止工作。

您可以在Codepen.io website 运行代码。

【问题讨论】：

标签： css html slider css-animations

【解决方案1】：

原因是您在基础上的 html 中引用了其他图片，而不是您的图片。例如 <img src="taj-mahal_copy.jpg" alt> 在 html 代码中并保存在 https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal_copy.jpg 下。

因此，您必须更改的内容（如果您想要自己的图片）您必须将基本代码 <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> 更改为保存图片的路径。

我不知道您将图片保存在哪里，但是您必须在基础中引用此路径，然后它应该可以工作。

如果您在更改本地文件夹的路径时遇到问题，这里有一个关于它的问题：What are the ways to make an html link open a folder。另外不要忘记在html代码中更改图片的名称。

【讨论】：

【解决方案2】：

这似乎可以解决问题。

var img = '<img src="austin-fireworks.jpg" alt>';
$("#slider figure").append(img);

【讨论】：