无法在HTML + CSS中添加图像滑块

Question

我试图通过在HTML中添加一个图像来自定义here的滑块。

当我在HTML中添加一个图像，并在CSS中进行相应的更改代码打破，它不工作。

这里是滑盖的HTML代码：

<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> 

这里是CSS代码：

@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; 
} 

我尝试添加了<figure>内的图像和滑块停止工作。

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

Answer 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代码中图片的名称。

Answer 2

这似乎是个伎俩。

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