Cannot add image in HTML + CSS Slider

Question

I am trying to customize the slider given here by adding one more image in the HTML.

When i add an image in HTML and make respective changes in the CSS the code is breaking and its not working.

Here is the HTML code of the slider:

/*Here is the 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;
}

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

I tried adding the image inside the <figure> and the slider stops working.

You can run the code at the Codepen.io website.

Answer 1

The reason is that you reference in your html on the base and there the other pictures are saved, but not yours. E.g <img src="taj-mahal_copy.jpg" alt> is in the html code and saved under https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal_copy.jpg.

So what you have to change (if you want your own pictures) you have to change the base code <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> to a path where your pictures are saved.

I don't know where you have saved your pictures but you have to reference this path in the base, then it should work.

If you should have problems to change the path to a local folder, here is an question about it: What are the ways to make an html link open a folder. In addition don't forget to change the names form the pictures in the html code.

Answer 2

This seemed to do the trick.

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