纯 CSS 幻灯片的下一步按钮

Question

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

Answer 2

你可以试试

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

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

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

---

HTML 基础：

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

CSS 理念：

---

#images { /* style and size it so it has size of one image and room to show aside : < and > (or some fancy icons) */}
#images:before , #images:after {/* content: '<' or '>' or fancy icon , absolute position */}
div {float:right;will aloow to overflow on left-side !, margin-right: - total width taken by images */
img {/* give some padding to resize width of parent box, set z-index and overlap them on right side */}
img:focus {/* lower z-index so next overlapping can be clikcked*/}
img:focus ~img:last-of-type {give some positive margin-right so next image takes place and is seen*/}

---

wich 给出了这个例子的 CSS ：

#images{
  width:150px;
  height:200px;
  overflow:hidden;
  font-size:0;
  border:solid 3px black;
  white-space:nowrap; 
  position:relative;
  margin:auto;
}
#images:before, #images:after {
  content:'<';/* or some fancy font/image */
  font-size:30px;
  font-weight:bold;
  text-shadow: 3px 0 , 0 0 1px;
  height:200px;
  line-height:200px;
  position:absolute;
  top:0;
  left:3px;
  z-index:3;/* on top of images */
  pointer-events:none;/* not clickable */
}
#images:after {
  content:'>';
  left:auto;
  right:3px;
  text-shadow: -3px 0 , 0 0 1px;
}
img {
  margin:0 -25px 0 0;
  padding:0  25px;
  position:relative;
  z-index:2;/* defaut */
}
img:focus {
  z-index:1;/* next one overlapping is on top */
}
img:hover {
  background:gray;
}
img:nth-child(odd) {
}
#images div {
  float:right;/* so it can overflow on left */
  whidth:100%; /* or 150px*/
  margin-right:-733.5%;/* or  1250px  = 10 imgs 100px + 50px padding -25px negative margin */
}
img:nth-child(2):focus ~img:last-of-type {
  margin-right:100px;  
}
img:nth-child(3):focus ~img:last-of-type {
  margin-right:225px;
}
/* and so on use a preprocessor to generate this part */

img:nth-child(9):focus ~img:last-of-type {
  margin-right:975px;
}
img:nth-child(10):focus  {/* LAST ONE */
  margin-right:1100px;
  border-right:25px solid black;/* hide next button , it could be a higher z-index as well with a background */
  padding-right:0;
  pointer-events:none;/* no click to loose focus to reset slide */
}

transitions ? 有点小问题，这里的动画可能很方便:)