Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* 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: 200px;
height: 150px;
}
.carousel {
box-shadow: 0px 0px 13px rgba(50, 50, 50, 0.7);
border: 10px solid #FFF;
overflow: hidden;
}
.button {
display: block;
width: 23px;
height: 23px;
cursor: pointer;
}
.prev, .next {
position: absolute;
top: 55px;
border-radius: 50%;
box-shadow: 0 1px 5px rgba(50, 50, 50, 0.7);
}
.prev {
background: #ddd url(http://tympanus.net/Development/Elastislide/images/nav.png) no-repeat 4px 3px;
}
.next {
right: 0;
background: #ddd url(http://tympanus.net/Development/Elastislide/images/nav.png) no-repeat 4px -17px;
}
/* end of look-and-feel */
.carousel {
display: inline-block;
position: relative;
width: 200px; /* the same width of the page */
}
.page {
float: left;
}
.carousel input {
display: none;
}
.move-right-container, .move-left-container {
/* needs to fit all the pages inside */
width: 1400px; /* = page.width * 7 */
}
.move-left-container {
margin-left: -600px; /* initial state */
}
#second-page-left:checked ~ .move-left-container {
/* moves one page to the right */
transition: margin-left 300ms ease-in;
margin-left: -400px; /* = page.width * -1 */
}
#third-page-left:checked ~ .move-left-container {
/* moves two pages to the right */
transition: margin-left 300ms ease-in;
margin-left: -200px; /* = normal position 0 */
}
#first-page-left:checked ~ .move-left-container {
animation: restart-left 300ms ease-in;
}
@keyframes restart-left {
0% {
margin-left: -200px; /* =-2*box.width */
}
100% {
margin-left: 0; /* =-3*box.width */
}
}
#second-page-right:checked ~ .move-left-container .move-right-container {
/* moves one page to the right */
transition: margin-left 300ms ease-in;
margin-left: -200px; /* = page.width * -1 */
}
#third-page-right:checked ~ .move-left-container .move-right-container {
/* moves two pages to the right */
transition: margin-left 300ms ease-in;
margin-left: -400px; /* = page.width * -2 */
}
#first-page-right:checked ~ .move-left-container .move-right-container {
animation: restart-right 300ms ease-in;
}
@keyframes restart-right {
0% {
margin-left: -400px; /* =-2*box.width */
}
100% {
margin-left: -600px; /* =-3*box.width */
}
}
#first-page-left:checked ~ .for-first-page-left,
#first-page-left:checked ~ .for-third-page-left,
#second-page-left:checked ~ .for-first-page-left,
#second-page-left:checked ~ .for-second-page-left,
#third-page-left:checked ~ .for-third-page-left,
#third-page-left:checked ~ .for-second-page-left,
#first-page-right:checked ~ .for-first-page-right,
#first-page-right:checked ~ .for-third-page-right,
#second-page-right:checked ~ .for-first-page-right,
#second-page-right:checked ~ .for-second-page-right,
#third-page-right:checked ~ .for-third-page-right,
#third-page-right:checked ~ .for-second-page-right {
display: none;
}
<div class="just-to-centralize-not-related-to-the-example">
<div class="carousel">
<input type="radio" name="controls-left" id="first-page-left" checked>
<input type="radio" name="controls-left" id="second-page-left">
<input type="radio" name="controls-left" id="third-page-left">
<label class="for-second-page-left" for="second-page-left">
<span class="button prev"></span>
</label>
<label class="for-third-page-left" for="third-page-left">
<span class="button prev"></span>
</label>
<label class="for-first-page-left" for="first-page-left">
<span class="button prev"></span>
</label>
<input type="radio" name="controls-right" id="first-page-right" checked>
<input type="radio" name="controls-right" id="second-page-right">
<input type="radio" name="controls-right" id="third-page-right">
<label class="for-second-page-right" for="second-page-right">
<span class="button next"></span>
</label>
<label class="for-third-page-right" for="third-page-right">
<span class="button next"></span>
</label>
<label class="for-first-page-right" for="first-page-right">
<span class="button next"></span>
</label>
<div class="move-left-container">
<div class="move-right-container">
<div class="page first">
<a href="#A"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage7.s3.amazonaws.com/2e9edf6a0b1311e2bb3e22000a1de78b_7.jpg"></a>
</div>
<div class="page second">
<a href="#B"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage4.s3.amazonaws.com/4d3da87c493211e2a12822000a9f18f6_7.jpg"></a>
</div>
<div class="page third">
<a href="#C"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage1.s3.amazonaws.com/aa10945e2c2911e292eb22000a1fbd89_7.jpg"></a>
</div>
<div class="page first">
<a href="#A"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage7.s3.amazonaws.com/2e9edf6a0b1311e2bb3e22000a1de78b_7.jpg"></a>
</div>
<div class="page second">
<a href="#B"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage4.s3.amazonaws.com/4d3da87c493211e2a12822000a9f18f6_7.jpg"></a>
</div>
<div class="page third">
<a href="#C"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage1.s3.amazonaws.com/aa10945e2c2911e292eb22000a1fbd89_7.jpg"></a>
</div>
<div class="page first">
<a href="#A"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage7.s3.amazonaws.com/2e9edf6a0b1311e2bb3e22000a1de78b_7.jpg"></a>
</div>
</div>
</div>
</div>
</div>
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.