A 100% pure CSS image slider with next/previous buttons, nav dots and image transitions.
Updated with simplified HTML and CSS, better image transitions and resized images.
<ul class="slides"> | |
<input type="radio" name="radio-btn" id="img-1" checked /> | |
<li class="slide-container"> | |
<div class="slide"> | |
<img src="http://atgkc.com/wp-content/uploads/2013/08/irontable.jpg" /> | |
</div> | |
<div class="nav"> | |
<label for="img-6" class="prev">‹</label> | |
<label for="img-2" class="next">›</label> | |
</div> | |
</li> | |
<input type="radio" name="radio-btn" id="img-2" /> | |
<li class="slide-container"> | |
<div class="slide"> | |
<img src="http://atgkc.com/wp-content/uploads/2013/08/ironcoffee1.jpg" /> | |
</div> | |
<div class="nav"> | |
<label for="img-1" class="prev">‹</label> | |
<label for="img-3" class="next">›</label> | |
</div> | |
</li> | |
<input type="radio" name="radio-btn" id="img-3" /> | |
<li class="slide-container"> | |
<div class="slide"> | |
<img src="http://atgkc.com/wp-content/uploads/2013/08/ashdesk.jpg" /> | |
</div> | |
<div class="nav"> | |
<label for="img-2" class="prev">‹</label> | |
<label for="img-4" class="next">›</label> | |
</div> | |
</li> | |
<li class="nav-dots"> | |
<label for="img-1" class="nav-dot" id="img-dot-1"></label> | |
<label for="img-2" class="nav-dot" id="img-dot-2"></label> | |
<label for="img-3" class="nav-dot" id="img-dot-3"></label> | |
</li> | |
</ul> |
/* | |
The only thing stopping this from being used in older browsers is the "~" selector in the last CSS rule, but since replacing it results in messy code I left it as it is. | |
*/ |
@import url(http://fonts.googleapis.com/css?family=Varela+Round); | |
html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); } | |
.slides { | |
padding: 0; | |
width: 609px; | |
height: 420px; | |
display: block; | |
margin: 0 auto; | |
position: relative; | |
} | |
.slides * { | |
user-select: none; | |
-ms-user-select: none; | |
-moz-user-select: none; | |
-khtml-user-select: none; | |
-webkit-user-select: none; | |
-webkit-touch-callout: none; | |
} | |
.slides input { display: none; } | |
.slide-container { display: block; } | |
.slide { | |
top: 0; | |
opacity: 0; | |
width: 609px; | |
height: 420px; | |
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; | |
} | |
.slide img { | |
width: 100%; | |
height: 100%; | |
} | |
.nav label { | |
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; | |
color: #FFF; | |
font-size: 156pt; | |
text-align: center; | |
line-height: 380px; | |
font-family: "Varela Round", sans-serif; | |
background-color: rgba(255, 255, 255, .3); | |
text-shadow: 0px 0px 15px rgb(119, 119, 119); | |
} | |
.slide:hover + .nav label { opacity: 0.5; } | |
.nav label:hover { opacity: 1; } | |
.nav .next { right: 0; } | |
input:checked + .slide-container .slide { | |
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 + .slide-container .nav label { display: block; } | |
.nav-dots { | |
width: 100%; | |
bottom: 9px; | |
height: 11px; | |
display: block; | |
position: absolute; | |
text-align: center; | |
} | |
.nav-dots .nav-dot { | |
top: -5px; | |
width: 11px; | |
height: 11px; | |
margin: 0 4px; | |
position: relative; | |
border-radius: 100%; | |
display: inline-block; | |
background-color: rgba(0, 0, 0, 0.6); | |
} | |
.nav-dots .nav-dot:hover { | |
cursor: pointer; | |
background-color: rgba(0, 0, 0, 0.8); | |
} | |
input#img-1:checked ~ .nav-dots label#img-dot-1, | |
input#img-2:checked ~ .nav-dots label#img-dot-2, | |
input#img-3:checked ~ .nav-dots label#img-dot-3, | |
input#img-4:checked ~ .nav-dots label#img-dot-4, | |
input#img-5:checked ~ .nav-dots label#img-dot-5, | |
input#img-6:checked ~ .nav-dots label#img-dot-6 { | |
background: rgba(0, 0, 0, 0.8); | |
} |