<carousel>
<input type="radio" id="page1cb" checked name="pages" />
<input type="radio" id="page2cb" name="pages" />
<input type="radio" id="page3cb" name="pages" />
<input type="radio" id="page4cb" name="pages" />
<input type="radio" id="page5cb" name="pages" />
<!-- page 1 -->
<page id="page1">
<div>Page One!</div>
<label for="page2cb" title="Start"><b>START</b></label>
</page>
<!-- page 2 -->
<page id="page2">
<div>Page Two!</div>
<label for="page3cb" title="Next"><b>NEXT</b></label>
</page>
<!-- page 3 -->
<page id="page3">
<div>Page Three!</div>
<label for="page4cb" title="Next"><b>NEXT</b></label>
</page>
<!-- page 4 -->
<page id="page4">
<div>Page Four!</div>
<label for="page5cb" title="Next"><b>NEXT</b></label>
</page>
<!-- page 5 -->
<page id="page5">
<div>Page Five!</div>
<label for="page1cb" title="That's all folks!"><b>START AGAIN?</b></label>
</page>
<carousel>
carousel {
width: 100%;
text-align: center;
font-family: Trebuchet MS;
display: block;
font-size: 6vmin;
page {
position: absolute;
top: 2em;
left: 0;
width: 100%;
transition: transform 0.5s;
transform: scale(0);
div {
padding: 3em;
}
label {
cursor: pointer;
background: #d9ff4f;
padding: 1em 2em;
}
}
@for $i from 1 through 5 {
#page#{$i}cb:checked ~ {
#page#{$i} {
transform: scale(1);
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.