Невозможно добавить изображение в HTML + CSS Slider

Question

Я пытаюсь настроить слайдер, заданный here, добавив еще одно изображение в HTML.

Когда я добавляю изображение в 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);