响应式 HTML CSS 滑块问题

Question

我刚刚将此代码笔复制到我的页面。

它运行良好，但我的页面上也有一些其他内容，问题是当我导入此代码时，它会破坏我页面上的所有链接和其他图像。有谁知道为什么会发生这种情况，以及如何解决这个问题？:)

.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

它可能会破坏所有链接和其他所有内容，因为

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

这将使您的链接和引用基于此。根据 Mozilla 开发人员：

HTML<base>元素指定要用于所有相对的基本 URL 文档中包含的 URL。只能有一个元素 在文档中。

特别是针对您的案例的解决方案：

删除页面顶部的基本 href 元素，并单独更新滑块中每个图像的来源以获取其绝对 URL。

Answer 2

**这是我到目前为止所拥有的，它工作正常**

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

这是我的 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%;
}
}