Based on http://codepen.io/robdodson/pen/rCGvJ Mine isn't ie8 compatible.
A Pen by Glenn Cueto on CodePen.
Based on http://codepen.io/robdodson/pen/rCGvJ Mine isn't ie8 compatible.
A Pen by Glenn Cueto on CodePen.
<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; | |
} | |
} |