Html 纯css幻灯片的下一步按钮

我有这个图像滑块。它工作正常，但我希望有人能告诉我如何添加下一步按钮？这就是我所需要的，只要一个下一步按钮，点击它就会浏览所有的图片。请问在css中它会放在哪里？非常感谢

CSS:

#images {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#images img {
width: 500px;
height: 300px;
position: absolute;
top: 0;
left: -500px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
cursor:pointer;
}
#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#images img:first-child {
left: 0;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 2px solid #6892F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #6892F2;
}

<div id="images">

<img id="image1" src="Slide1.png" /> 

<img id="image2" src="Slide2.png" />

<img id="image3" src="Slide3.png" />

<img id="image4" src="Slide4.png" />

<img id="image5" src="Slide5.png" />

<img id="image6" src="Slide6.png" />

<img id="image7" src="Slide7.png" />

<img id="image8" src="Slide8.png" /> 

<img id="image9" src="Slide9.png" />

<img id="image10" src="Slide10.png" />

<img id="image11" src="Slide11.png" />

<img id="image12" src="Slide12.png" />

<img id="image13" src="Slide13.png" />

</div>




<div id="slider"><b>

<a href="#image1">Start at 13</a>
<a href="#image2">12</a>
<a href="#image3">11</a>
<a href="#image4">10</a>
<a href="#image5">9</a>
<a href="#image6">8</a>
<a href="#image7">7</a>
<a href="#image8">6</a>
<a href="#image9">5</a>
<a href="#image10">4</a>
<a href="#image11">3</a>
<a href="#image12">2</a>
<a href="#image13">1</a>

</div></b>

和HTML:

#images {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#images img {
width: 500px;
height: 300px;
position: absolute;
top: 0;
left: -500px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
cursor:pointer;
}
#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#images img:first-child {
left: 0;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 2px solid #6892F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #6892F2;
}

<div id="images">

<img id="image1" src="Slide1.png" /> 

<img id="image2" src="Slide2.png" />

<img id="image3" src="Slide3.png" />

<img id="image4" src="Slide4.png" />

<img id="image5" src="Slide5.png" />

<img id="image6" src="Slide6.png" />

<img id="image7" src="Slide7.png" />

<img id="image8" src="Slide8.png" /> 

<img id="image9" src="Slide9.png" />

<img id="image10" src="Slide10.png" />

<img id="image11" src="Slide11.png" />

<img id="image12" src="Slide12.png" />

<img id="image13" src="Slide13.png" />

</div>




<div id="slider"><b>

<a href="#image1">Start at 13</a>
<a href="#image2">12</a>
<a href="#image3">11</a>
<a href="#image4">10</a>
<a href="#image5">9</a>
<a href="#image6">8</a>
<a href="#image7">7</a>
<a href="#image8">6</a>
<a href="#image9">5</a>
<a href="#image10">4</a>
<a href="#image11">3</a>
<a href="#image12">2</a>
<a href="#image13">1</a>

</div></b>

---

尝试将图像移动到包含每张幻灯片唯一导航元素的div中：

<div id="image1">
  <img src="Slide1.png" /> 
  <a href="#image13">Prev</a>
  <a href="#image2">Next</a>
</div>

<div id="image2">
  <img src="Slide2.png" />
  <a href="#image1">Prev</a>
  <a href="#image3">Next</a>
</div>

您可以试试

• 使用pseudo显示上一个/下一个按钮
• 并允许关注图像标签

您的HTML库可用于将所有图像包装在一个额外的div中

这个额外的div将允许移动图像行

---

HTMLbase：

<div id="images">
  <div>
    <img tabindex="0" src="http://lorempixel.com/100/200/nature/1" />
<!-- + 9 others -->
  </div>
</div>

CSS理念：

---

#images{/*对其进行样式和大小设置，使其具有一个图像的大小和可显示的空间：<和>（或一些奇特的图标）*/}
#图像：前，#图像：后{/*内容：''或花式图标，绝对位置*/}
div{float:right；将在左侧向下溢出！右边距：-图像拍摄的总宽度*/
img{/*为调整父框的宽度提供一些填充，设置z索引并在右侧重叠它们*/}
img:focus{/*降低z索引，以便可以剪切下一个重叠*/}
img:focus~img:last of type{将一些正边距右移，这样下一个图像就会出现并被看到*/}

---

对于本例，wich给出了CSS：

#图像{
宽度：150px；
高度：200px；
溢出：隐藏；
字号：0；
边框：纯色3px黑色；
空白：nowrap；
位置：相对位置；
保证金：自动；
}
#图像：之前，#图像：之后{
内容：''；
左：自动；
右：3px；
文本阴影：-3px 0，0 0 1px；
}
img{
利润率：0-25px0；
填充：0 25px；
位置：相对位置；
z-索引：2；/*defaut*/
}
img：焦点{
z索引：1；/*下一个重叠在顶部*/
}
img：悬停{
背景：灰色；
}
img:n个孩子（单数）{
}
#影像组{
float:right；/*因此它可以在左侧溢出*/
whidth:100%；/*或150px*/
右边距：-733.5%；/*或1250px=10 imgs 100px+50px填充-25px负边距*/
}
img:n个孩子（2）：焦点~img:type的最后一个{
右边距：100px；
}
img:n个孩子（3）：焦点~img:type的最后一个{
右边距：225px；
}
/*等等，使用预处理器生成这个部分*/
img:n个孩子（9）：焦点~img:type的最后一个{
右边距：975px；
}
第n个孩子（10）：焦点{/*最后一个*/
右边距：1100px；
右边框：25px纯黑；/*隐藏下一步按钮，它可能是一个更高的z索引以及背景*/
右边填充：0；
指针事件：无；/*无单击可松开焦点以重置幻灯片*/
}

一辆小马车，动画在这里可能很方便：）

可能是