無法在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);