html - 纯 css 幻灯片的下一个按钮

Question

我制作了这个图像 slider 。它工作正常，但我希望有人能告诉我如何向它添加下一步按钮？这就是我所需要的，只需一个下一个按钮，单击该按钮将浏览所有图像。请问它会在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;
}

和 HTML:

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

Answer 1

尝试将您的图像移动到包含每张幻灯片的独特导航元素的 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>