响应式HTML CSS滑块问题

Question

I've just copied this codepen to my page.

It works well, but I have some other content on my page as well, and the problem is that when I import this code, it destroys all links and other images on my page. Does anyone know why is this happening, and how to solve this? :)

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

Answer 1

It probably destroys all links and everything else because of

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">

Which will make it so that your links and references are based on off of that. As per mozilla developers :

The HTML <base> element specifies the base URL to use for all relative URLs contained within a document. There can be only one element in a document.

Solution for you case in particular:

Remove that base href element on top of your page, and update the sources for each image in the slider individually for its absolute URL.