Responsive HTML CSS slider problems - html

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.

Answer 2

**here's what i have so far and it's working properly **
<div id="slider">
<div class="slider-title">
<h2>best seller</h2>
</div>
<figure>
<img src="simon-lee-TW93DCT6T_U-unsplash.jpg" alt="sample photo">
<img src="colin-cassidy-wdG7v-9pJ1A-unsplash.jpg" alt="sample photo">
<img src="massimiliano-corradini-Nylf-HeGX2w-unsplash.jpg" alt="sample photo">
<img src="studio-blackthorns-C7vX_SBPrqk-unsplash.jpg" alt="sample photo">
<img src="simon-lee-TW93DCT6T_U-unsplash.jpg" alt="sample photo">
</figure>
</div>
and this is my css
#slider {
margin-top: 25px;
background: #417378;
border-radius: 10px;
overflow: hidden;
}
#slider figure {
border-radius: 10px;
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
width: 20%;
height: 400px;
float: left;
margin-top: -25px;
}
#keyframes slider {
0% {
border-radius: 10px;
left: 0;
}
20% {
border-radius: 10px;
left: 0;
}
25% {
border-radius: 10px;
left: -100%;
}
45% {
border-radius: 10px;
left: -100%;
}
50% {
border-radius: 10px;
left: -200%;
}
70% {
border-radius: 10px;
left: -200%;
}
75% {
border-radius: 10px;
left: -300%;
}
95% {
border-radius: 10px;
left: -300%;
}
100% {
border-radius: 10px;
left: -400%;
}
}