Kann kein Bild in HTML + CSS hinzufügen Slider

Question

Ich versuche, den Schieberegler gegeben here durch Hinzufügen eines weiteren Bildes im HTML anzupassen.

Wenn ich ein Bild in HTML hinzufügen und entsprechende Änderungen in der CSS vornehmen, bricht der Code und es funktioniert nicht.

Hier ist der HTML-Code des Schiebers:

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

Hier wird der 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; 
} 

ich das Hinzufügen versucht, das Bild innerhalb des <figure> und der Schieber nicht mehr funktioniert. Sie können den Code unter Codepen.io website ausführen.

Answer 1

Der Grund ist, dass Sie in Ihrem HTML auf der Basis verweisen und dort die anderen Bilder gespeichert werden, aber nicht Ihre. ZB <img src="taj-mahal_copy.jpg" alt> ist im HTML-Code und gespeichert unter https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal_copy.jpg.

Also, was Sie ändern müssen (wenn Sie Ihre eigenen Bilder wollen) müssen Sie den Basiscode <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> in einen Pfad ändern, wo Ihre Bilder gespeichert werden.

Ich weiß nicht, wo Sie Ihre Bilder gespeichert haben, aber Sie müssen diesen Pfad in der Basis verweisen, dann sollte es funktionieren.

Wenn Sie Probleme haben, den Pfad zu einem lokalen Ordner zu ändern, hier ist eine Frage dazu: What are the ways to make an html link open a folder. Vergessen Sie außerdem nicht, die Namen der Bilder im HTML-Code zu ändern.

Answer 2

Dies schien den Trick zu tun.

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