CODEWITHSUNDEEP
csshtmlslidercss-animations
Swapnil Kadam
Swapnil Kadam

Reputation: 119

Cannot add image in HTML + CSS Slider

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.

Upvotes: 2

Views: 696

Answers (2)

Jess
Jess

Reputation: 23

This seemed to do the trick.

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

Upvotes: 0

Anetair
Anetair

Reputation: 150

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.

Upvotes: 1

Related Questions