我正在寻找尽可能简单的滑动内容 . 没有javascript，没有绝对定位（我希望它相对于内容流） . 我已经尝试了很多次，但我似乎无法做到这一点 .
This真的很想要我想要的，但不是滑动的背景 . 我希望文本或图像在任意数量的幻灯片中以预定义的大小（如每张幻灯片的高度：500px，但宽度是父级宽度的100％）进行聚焦 .
这是我到目前为止所拥有的 .
HTML：
<center>
<span tabindex="0"></span>
<span tabindex="0"></span>
<span tabindex="0"></span>
<span tabindex="0"></span>
<br><br>
<div class="content">
<div class="slider">Wee!</div>
<div class="slider">Woo!</div>
<div class="slider">Waa!</div>
<div class="slider">Wuu!</div>
</div>
</center>
CSS：
* {outline: none;}
.content{display: block; overflow: hidden; width: 640px; height: 480px; border-radius: 10px;}
.slider {display: inline-block; width: 640px; height: 480px; background-color: orange; box-shadow: 2px 2px black;}
span:nth-child(1):focus ~ .slider { background-color: red;}
span:nth-child(2):focus ~ .slider { background-color: green;}
span:nth-child(3):focus ~ .slider { background-color: yellow;}
span:nth-child(4):focus ~ .slider { background-color: blue;}
span {width: 20px; height: 20px; padding: 0px 10px 0px 10px; border-radius: 90px; cursor: pointer; margin: 10px; box-shadow: 0 2px 5px rgba(0,0,0,.4); -webkit-transition: background .2s ease;transition: background .2s ease; border: 3px solid rgba(0,0,0,.4)}
span:hover {background: #ddd; }
span:active {background: #333; }
任何帮助将不胜感激 .