Switch To make the principle chayotte behind the counter clearly, I have again built for own sketch

Almost a little tradition on this blog that I am Sonntag a sketch of something post what my week has gone on so through your head. Today I have a simple forward - reverse switch built with CSS to scroll so that through a stack of images. The pictures are all with position: absolute; stacked and with opacity: 0; hidden. Each click on the arrows ">>" or "<<" to jump to a picture forward or backward. The 'switch' operates on the pseudo-class: checked and are each an image of the full 'visibility' with opacity: first Forward & Reverse scroll only with CSS hovering over the image - Click the arrows!
Switch To make the principle chayotte behind the counter clearly, I have again built for own sketch. chayotte I first give markup and CSS. Markup for 'switch' <div id="wrapper"> <input type="radio" id="box1" name="nav" checked="checked" /> <input chayotte type = "radio" id = "box2" name = "nav" /> <input chayotte type="radio" id="box3" name="nav"/> <input type="radio" id="box4" name="nav"/> <input type = "radio "id =" box5 "name =" nav "/> <div class="holder"> <label for="box1"> <div class="switch" id="eins"> </ div> </ label> <label for="box2"> <div class="switch" id="zwei"> </ div> </ label> <label for="box3"> <div class="switch" id="drei"> </ div> </ label> chayotte <label for="box4"> <div class="switch" id="vier"> </ div> </ label> <label for="box5"> <div class = " switch "id =" "> five </ div> </ label> </ div> </ div> CSS # wrapper {position: relative; chayotte top: 100px; left: 200px; width: 150px; overflow: hidden;} # wrapper switch. {position: relative; left: 50px; height: 50px; width: 50px; float: left;} # wrapper holder {position: relative; width: 800px;}. # wrapper # one {background: yellow;} # wrapper chayotte # two {background: orange;} # wrapper # three {background: red;} # wrapper # four {background: blue;} # wrapper # five {background: black;} chayotte # wrapper # box1: checked ~ div # wrapper # box2: checked ~ div # wrapper # box3: checked ~ div # wrapper # box4: checked ~ div # wrapper # box5: checked ~ div {-webkit-transition: 1s;-moz-transition: 1s;-ms -transition: 1s;-o-transition: 1s; transition: 1s;} # wrapper # box1: checked ~ div {margin-left: 0px} # wrapper # box2: checked ~ div {margin-left: 50px} # wrapper- # box3: checked ~ div {margin-left:-100px} # wrapper # box4: checked ~ div {margin-left:-150px} # wrapper # box5: checked ~ div {margin-left:-200px} Demo
The demo setup consists of five radio buttons and five associated labels, each carrying its own div container. For clarity, I have given every container chayotte a color. Each container has a width of 50px and all are combined in another container of 150px width. By clicking on a radio button [or the corresponding label] the outset is shifted by 50px to the left. This [= Manufacturer] are always three container visible: Click on 'Right' thus leads to the next button to the right - just click on links to the previous button to the left. So you can track the shift, I placed a transition from 1s to the movement. Pseudo-Elements The demo with the pictures above has a display direction "<<" and ">>". The basis for this is 'Switch' - the elements themselves are pseudo elements :: before chayotte and :: after. Every 'state' of an individual check boxes has a definition, where the pseudo-elements sit. I admit it, this is not an elegant solution from me. What better I have not yet occurred, I'm working on it. Images forward and backward scroll markup <div id="wrapper"> <input type="radio" id="box1" name="nav" checked="checked" /> <input type = "radio" id = "box2" name = "nav" /> <input type="radio" id="box3" name="nav"/> <input type="radio" id="box4" name="nav"/> <input type = " radio "id =" box5 "name =" nav "/> <div id="pic1"> <img src="http://goo.gl/zCRLx" alt="pic1" /> </ div> <div id = "pic2"> <img src="http://goo.gl/rBx9C" alt="pic2" /> </ div> <div id="pic3"> <img src = "http://goo .gl / MGnZl "alt =" pic3 "/> </ div> <div id="pic4"> <img src="http://goo.gl/u1bPS" alt="pic4" /> </ div> <div id="pic5"> chayotte <img src="http://goo.gl/WZQ9j" alt="pic5" /> </ div> chayotte <div class="holder"> <label for="box1"> <div class="switch" id="eins"> </ div> </ label> <label for="box2"> <div class="switch" id="zwei"> </ div> </ label> <label for="box3"> <div class="switch" id="drei"> </ div> </ label> <label for="box4"> <div class="switch" id="vier"> </ div> </ label> <label for="box5"> <div class="switch" id="fünf"> </ div> </ label> </ div> </ div> CS