Skip to content

Instantly share code, notes, and snippets.

@c01nd01r

c01nd01r/index.html

Created September 14, 2015 16:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save c01nd01r/b0b16553df1e5ea173d1 to your computer and use it in GitHub Desktop.
Save c01nd01r/b0b16553df1e5ea173d1 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Slider
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="@pepelsbey">
<title>JS Bin</title>
</head>
<body>
<div class="slider">
<input type="radio" name="slider__check" class="slider__check" id="slider__check-1" checked><label for="slider__check-1" class="slider__label">1</label><img src="http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg" alt="" class="slider__image">
<input type="radio" name="slider__check" class="slider__check" id="slider__check-2"><label for="slider__check-2" class="slider__label">2</label><img src="http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg" alt="" class="slider__image">
<input type="radio" name="slider__check" class="slider__check" id="slider__check-3"><label for="slider__check-3" class="slider__label">3</label><img src="http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg" alt="" class="slider__image">
<input type="radio" name="slider__check" class="slider__check" id="slider__check-4"><label for="slider__check-4" class="slider__label">4</label><img src="http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg" alt="" class="slider__image">
<input type="radio" name="slider__check" class="slider__check" id="slider__check-5"><label for="slider__check-5" class="slider__label">5</label><img src="http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg" alt="" class="slider__image">
</div>
</body>
</html>
Raw
style.css
.slider {
position:relative;
width:700px;
padding-top:370px;
text-align:center;
}
.slider__check {
position:absolute;
clip:rect(0 0 0 0);
overflow:hidden;
}
.slider__image {
position:absolute;
top:0;
left:0;
}
.slider__label {
overflow:hidden;
display:inline-block;
width:20px;
height:20px;
background:#069;
border-radius:50%;
text-indent:-9999px;
}
/* Display */
.slider__image {
display:none;
}
.slider__check:checked + .slider__label + .slider__image {
display:block;
}
/* Current */
.slider__check:checked + .slider__label {
background:#C00;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment