2016-07-07 5 views
1

hereのスライダーをHTMLにもう1枚追加してカスタマイズしようとしています。HTML + CSSで画像を追加できないSlider

私はHTMLでイメージを追加し、CSSを変更するとコードが壊れていて動作しません。ここで

<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コードされています:

ここでは、スライダーのHTMLコードがある

@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でコードを実行できます。

答えて

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コードの画像から名前を変更することを忘れないでください。

0

これはやっているようです。

var img = '<img src="austin-fireworks.jpg" alt>'; 
$("#slider figure").append(img); 
関連する問題