Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example of carrossel CSS only simplified
/**
* Example of carrossel CSS only simplified
*/
/* this part is just look-and-feel */
.just-to-centralize-not-related-to-the-example {
display: inline-block;
margin-top: 20px;
text-align: center;
width: 100%;
}
.page {
width: 100px;
height: 30px;
color: white;
padding-top: 15px;
font-size: 15px;
font-weight: bold;
}
.first {
background-color: blue;
}
.second {
background-color: red;
}
.third {
background-color: green;
}
.carousel {
border: 5px solid black;
}
.button {
text-decoration: underline;
cursor: pointer;
}
/* end of look-and-feel */
.carousel {
display: inline-block;
position: relative;
width: 100px; /* the same width of the page */
}
.page {
float: left;
}
.move-container {
/* needs to fit all the pages inside */
width: 300px; /* = page.width * 3 */
}
#second-page:checked ~ .move-container {
/* moves one page to the right */
margin-left: -100px; /* = page.width * -1 */
}
#third-page:checked ~ .move-container {
/* moves two pages to the right */
margin-left: -200px; /* = page.width * -2 */
}
.carousel input {
display: none;
}
#first-page:checked ~ .for-first-page,
#first-page:checked ~ .for-third-page,
#second-page:checked ~ .for-first-page,
#second-page:checked ~ .for-second-page,
#third-page:checked ~ .for-third-page,
#third-page:checked ~ .for-second-page {
display: none;
}
<div class="just-to-centralize-not-related-to-the-example">
<div class="carousel">
<input type="radio" name="controls" id="first-page" checked>
<input type="radio" name="controls" id="second-page">
<input type="radio" name="controls" id="third-page">
<label class="for-second-page" for="second-page">
<span class="button next">next</span>
</label>
<label class="for-third-page" for="third-page">
<span class="button next">next</span>
</label>
<label class="for-first-page" for="first-page">
<span class="button next">next</span>
</label>
<div class="move-container">
<div class="page first">A</div>
<div class="page second">B</div>
<div class="page third">C</div>
</div>
<div>
</div>
// alert('Hello world!');
{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
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.