Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
html/css-only slider
<h1>HTML/CSS-only Slider</h1>
<div id="slider">
<input checked="" type="radio" name="slider" id="slide1" selected="false"/>
<input type="radio" name="slider" id="slide2" selected="false"/>
<input type="radio" name="slider" id="slide3" selected="false"/>
<input type="radio" name="slider" id="slide4" selected="false"/>
<div id="slides">
<div class="inner">
<img src="http://placehold.it/350x200/234345&text=img 1" alt="slide 1"/>
<img src="http://placehold.it/350x200/663399&text=img 2" alt="slide 2"/>
<img src="http://placehold.it/350x200/654321&text=img 3" alt="slide 3"/>
<img src="http://placehold.it/350x200/990000&text=img 4" alt="slide 4"/>
</div>
</div>
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
/*
Based on http://codepen.io/robdodson/pen/rCGvJ
Mine isn't ie8 compatible.
*/
* { box-sizing: border-box; }
body {
background: #EAF0FB;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
h1 {
text-align: center;
font-weight: 200;
color: #222;
}
$numslides: 4;
#slider {
max-width: 350px;
margin: 0 auto;
input {
display: none;
}
label {
background: #bbb;
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
border-radius: 2px;
}
}
#slides {
width: 100%;
overflow: hidden;
.inner {
width: $numslides * 100%;
transition: all 700ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
img {
width: 100% / $numslides;
float: left;
}
}
@for $i from 1 through $numslides {
#slide#{$i}:checked ~ #slides .inner {
margin-left: ($i - 1) * -100%;
}
}
@for $i from 1 through $numslides {
#slide#{$i}:checked ~ label[for="slide#{$i}"] {
background: #333;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.