Next button for pure css slideshow

Question

I have this image slider made. It works fine but I was hoping someone could tell me how to add a Next button to it? That's all I need, just a next button that when clicked will go through all the images. Where would it go in the css, please? Many thanks.

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

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

possible duplicate of [Implement a CSS-only slideshow / carousel with next and previous buttons?](http://stackoverflow.com/questions/21647389/implement-a-css-only-slideshow-carousel-with-next-and-previous-buttons) — jordiburgos, Apr 05 '14 at 23:23

score 0 · Answer 1 · answered Apr 06 '14 at 00:16

Try moving your images into divs that contain unique navigation elements for each slide:

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

score 0 · Answer 2 · answered Apr 06 '14 at 01:23

you can try

to use pseudo to show prev/next button
and allow focus on image tags.

Your HTML base could be used wrapping all image in one extra div.

this extra div will allow row of image to be moved. DEMO

HTML base :

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

CSS idea :

#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 gives this CSS for this example :

#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 ? a little buggy , animations could be handy here :)

Next button for pure css slideshow

2 Answers2