Created
October 23, 2012 18:08
-
-
Save xav76/3940419 to your computer and use it in GitHub Desktop.
A CodePen by Avi Kohn. CSS image slider w/ next/prev buttons - A 100% pure CSS image slider with previous/next buttons and image transitions. Updated with simplified HTML and CSS, better image transitions and resized images.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- NOTE: None of the included images are mine and I take no credit for them!! --> | |
<ul id="body"> | |
<input type="radio" name="radio-btn" id="img-1" checked /> | |
<li id="img-container"> | |
<div id="img-inner"> | |
<img src="http://farm9.staticflickr.com/8043/8098759802_6da1ff5538_z.jpg"> | |
</div> | |
<label for="img-6" class="sb-bignav" title="Previous"></label> | |
<label for="img-2" class="sb-bignav" title="Next"></label> | |
</li> | |
<input type="radio" name="radio-btn" id="img-2" /> | |
<li id="img-container"> | |
<div id="img-inner"> | |
<img src="http://farm9.staticflickr.com/8335/8098750377_2522e75807_z.jpg"> | |
</div> | |
<label for="img-1" class="sb-bignav" title="Previous"></label> | |
<label for="img-3" class="sb-bignav" title="Next"></label> | |
</li> | |
<input type="radio" name="radio-btn" id="img-3" /> | |
<li id="img-container"> | |
<div id="img-inner"> | |
<img src="http://farm9.staticflickr.com/8053/8098759982_e9ffbf1ac3_z.jpg"> | |
</div> | |
<label for="img-2" class="sb-bignav" title="Previous"></label> | |
<label for="img-4" class="sb-bignav" title="Next"></label> | |
</li> | |
<input type="radio" name="radio-btn" id="img-4" /> | |
<li id="img-container"> | |
<div id="img-inner"> | |
<img src="http://farm9.staticflickr.com/8054/8098759930_a1e8fdf396_z.jpg"> | |
</div> | |
<label for="img-3" class="sb-bignav" title="Previous"></label> | |
<label for="img-5" class="sb-bignav" title="Next"></label> | |
</li> | |
<input type="radio" name="radio-btn" id="img-5" /> | |
<li id="img-container"> | |
<div id="img-inner"> | |
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg"> | |
</div> | |
<label for="img-4" class="sb-bignav" title="Previous"></label> | |
<label for="img-6" class="sb-bignav" title="Next"></label> | |
</li> | |
<input type="radio" name="radio-btn" id="img-6" /> | |
<li id="img-container"> | |
<div id="img-inner"> | |
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg"> | |
</div> | |
<label for="img-5" class="sb-bignav" title="Previous"></label> | |
<label for="img-1" class="sb-bignav" title="Next"></label> | |
</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* NOTE: The next-previous image's are not mine and I take no credit for them!! */ | |
html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); } | |
ul, li { display: block; } | |
#body { | |
left: 50%; | |
width: 609px; | |
height: 405px; | |
display: block; | |
position: absolute; | |
margin-left: -305px; | |
} | |
#body input { display: none; } | |
#img-inner { | |
top: 0; | |
opacity: 0; | |
width: 609px; | |
height: 405px; | |
display: block; | |
position: absolute; | |
transform: scale(0); | |
-moz-transform: scale(0); | |
-webkit-transform: scale(0); | |
transition: all .7s ease-in-out; | |
-moz-transition: all .7s ease-in-out; | |
-webkit-transition: all .7s ease-in-out; | |
} | |
#img-inner img { | |
width: 100%; | |
height: 100%; | |
} | |
#img-inner:nth-of-type(1) { | |
/* And... CSS3 image preloading :D */ | |
background-image: | |
url("http://farm9.staticflickr.com/8335/8098750377_2522e75807_z.jpg"), | |
url("http://farm9.staticflickr.com/8053/8098759982_e9ffbf1ac3_z.jpg"), | |
url("http://farm9.staticflickr.com/8054/8098759930_a1e8fdf396_z.jpg"), | |
url("http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg"), | |
url("http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg"); | |
} | |
#img-inner:hover ~ label.sb-bignav { opacity: 0.5; } | |
label.sb-bignav:hover { opacity: 1; } | |
.sb-bignav { | |
width: 200px; | |
height: 100%; | |
display: none; | |
position: absolute; | |
opacity: 0; | |
z-index: 9; | |
cursor: pointer; | |
transition: opacity .2s; | |
-moz-transition: opacity .2s; | |
-webkit-transition: opacity .2s; | |
} | |
label[title="Next"] { | |
right: 0; | |
background: url('http://www.element17.com/images/nav-right.png') center center no-repeat; | |
} | |
label[title="Previous"] { | |
background: url('http://www.element17.com/images/nav-left.png') center center no-repeat; | |
} | |
input:checked + li > #img-inner { | |
opacity: 1; | |
transform: scale(1); | |
-moz-transform: scale(1); | |
-webkit-transform: scale(1); | |
transition: opacity 1s ease-in-out; | |
-moz-transition: opacity 1s ease-in-out; | |
-webkit-transition: opacity 1s ease-in-out; | |
} | |
input:checked + li > label { display: block; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment