carousel demo

dabblet.css

/* carousel demo */
* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
html {
	/* fonts */
	font:81.25%/2 sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	/* box moxel */
	min-height: 100%;
	overflow-y:scroll;
	margin:0;
}

/*------------------------------------*\
Row module
\*------------------------------------*/
.row:before,
.row:after {
	content: "";
	display: table;
}

.row:after { clear: both; }

.row {
	max-width: 75.692em; /* 984px */
	position: relative;
	margin: 0 auto 0.846em auto; /* 0 auto 11px auto */
}

@media screen and (max-width:983px) { .row { max-width: 58.769em; /* 764px */ } }
@media screen and (max-width:763px) { .row { max-width: 44.923em; /* 584px */ } }
@media screen and (max-width:583px) { .row { max-width: 100%; } }

	.row .row {
		width: auto;
		max-width: none;
		min-width: 0;
		margin-left: -0.923em; /* -12px */
		margin-right: -0.923em; /* -12px */;
	}

/*------------------------------------*\
Island module
\*------------------------------------*/
.row > .island,
.row > .islet { width: 100%; }

.island,
.islet {
	display: block;
	float: left;
	padding: 0 0.923em; /* 12px */
}

/* mobile landscape */
@media screen and (max-width:583px) {
	.island,
	.islet {
		float: none;
		clear: both;
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
}

/*------------------------------------*\
Carousel
\*------------------------------------*/
.carousel-input { display: none; }
.demo .carousel { width:50%; }
.carousel {
	overflow:hidden;
	position: relative;
	margin-bottom: 0;
	border-radius: 0.231em; /* 3px */
}
.home-features .carousel { height: 26.923em; /* 350px */ }

@media screen and (max-width:983px) {
	.home-features .carousel,
	.home-features .carousel-slides,
	.home-features .slider > img { height: 20.385em; /* 265px */ }
}
@media screen and (max-width:763px) { 
	.home-features .carousel,
	.home-features .carousel-slides,
	.home-features .slider > img { height: 6.692em; /* 87px */ } 
}
@media screen and (max-width:583px) { .home-features .carousel { display: none; } }

.carousel-slides {
	width: 500%;
	overflow: hidden;
	line-height: 0;
	-webkit-transition: all 800ms cubic-bezier(.770,0,.175,1);
	-moz-transition: all 800ms cubic-bezier(.770,0,.175,1);
	transition: all 800ms cubic-bezier(.770,0,.175,1);
}
#slide1:checked ~ .carousel > .carousel-slides { margin-left: 0; }
#slide2:checked ~ .carousel > .carousel-slides { margin-left: -100%; }
#slide3:checked ~ .carousel > .carousel-slides { margin-left: -200%; }
#slide4:checked ~ .carousel > .carousel-slides { margin-left: -300%; }
#slide5:checked ~ .carousel > .carousel-slides { margin-left: -400%; }

.slide {
	width: 20%;
	position: relative;
	float: left;
}

.home-features .slide > img { max-height: 26.923em; /* 350px */ }
.slide > img {
	width: 100%;
	border: none;
	margin-bottom: 0;
}
.overlay { position: absolute; }

.carousel-controls,
.carousel-pagination {
	opacity: 0;
	-webkit-transition: opacity 0.25s;
	-moz-transition: opacity 0.25s;
	transition: opacity 0.25s;
}

.carousel:hover .carousel-controls,
.carousel:hover .carousel-pagination { opacity: 1; }

.carousel-controls { width: 100%; }
.home-features .carousel-controls {
	height: 26.923em; /* 350px */
	margin: -26.923em 0 0 0; /* -350px 0 0 0 */
}

.carousel-controls > label { display: none; }

.paddle,
.dot {
	position: relative;
	cursor: pointer;
	z-index: 200;
}

/* main paddle styles */
.paddle {
	width: 3.769em; /* 40px */
	background-image: url(../img/ui/carousel-controls.png);
}
.demo .paddle { background-color: rgba(0,0,0,.2); }
.home-features .paddle { height: 26.923em; /* 350px */ }

/* webkit retina capable devices */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.paddle {
		background-image: url(../img/ui/[email protected]);
		background-size: 98px 700px;
	}
}

/* left paddle */
#slide1:checked ~ .carousel > .carousel-controls > label:nth-child(5),
#slide2:checked ~ .carousel > .carousel-controls > label:nth-child(1),
#slide3:checked ~ .carousel > .carousel-controls > label:nth-child(2),
#slide4:checked ~ .carousel > .carousel-controls > label:nth-child(3),
#slide5:checked ~ .carousel > .carousel-controls > label:nth-child(4) {
	display: block;
	float: left;
}

#slide1:checked ~ .carousel > .carousel-controls > label:hover:nth-child(5),
#slide2:checked ~ .carousel > .carousel-controls > label:hover:nth-child(1),
#slide3:checked ~ .carousel > .carousel-controls > label:hover:nth-child(2),
#slide4:checked ~ .carousel > .carousel-controls > label:hover:nth-child(3),
#slide5:checked ~ .carousel > .carousel-controls > label:hover:nth-child(4) {
	background-position: bottom left;
}

/* right paddle */
#slide1:checked ~ .carousel > .carousel-controls > label:nth-child(2),
#slide2:checked ~ .carousel > .carousel-controls > label:nth-child(3),
#slide3:checked ~ .carousel > .carousel-controls > label:nth-child(4),
#slide4:checked ~ .carousel > .carousel-controls > label:nth-child(5),
#slide5:checked ~ .carousel > .carousel-controls > label:nth-child(1) {
	display: block;
	float: right;
	background-position: top right;
}

#slide1:checked ~ .carousel > .carousel-controls > label:hover:nth-child(2),
#slide2:checked ~ .carousel > .carousel-controls > label:hover:nth-child(3),
#slide3:checked ~ .carousel > .carousel-controls > label:hover:nth-child(4),
#slide4:checked ~ .carousel > .carousel-controls > label:hover:nth-child(5),
#slide5:checked ~ .carousel > .carousel-controls > label:hover:nth-child(1) { background-position: bottom right; }

/* carousel pagination */
.carousel-pagination {
	text-align: center;
	margin: -10% 0 0;
}

.dot {
	display: inline-block;
	width: 0.923em; /* 12px */
	height: 0.923em;
	background-image: url(../img/ui/carousel-pagination.png);
	cursor: pointer;
	margin: 0.462em; /* 6px */
}

/* webkit retina capable devices */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.dot {
		background-image: url(../img/ui/[email protected]);
		background-size: 12px 24px;
	}
}

/* active dot states */
#slide1:checked ~ .carousel > .carousel-pagination > .dot:nth-child(1),
#slide2:checked ~ .carousel > .carousel-pagination > .dot:nth-child(2),
#slide3:checked ~ .carousel > .carousel-pagination > .dot:nth-child(3),
#slide4:checked ~ .carousel > .carousel-pagination > .dot:nth-child(4),
#slide5:checked ~ .carousel > .carousel-pagination > .dot:nth-child(5) { background-position: bottom left; }

dabblet.html

<div class="row home-features demo">
<div class=island>
	<input checked class=carousel-input type=radio name=slider id=slide1>
	<input class=carousel-input type=radio name=slider id=slide2>
	<input class=carousel-input type=radio name=slider id=slide3>
	<input class=carousel-input type=radio name=slider id=slide4>
	<input class=carousel-input type=radio name=slider id=slide5>
	<figure class=carousel id=HomepageAccordion>
		<div class=carousel-slides>
			<a class=slide href=# title="title of article">
				<img class=overlay src=http://placehold.it/468x350 alt="title of article" width=468 height=350>
				<img class=background src=../img/blank.gif style=background-image:url(http://placehold.it/468x350 alt="title of article" width=468 height=350>
			</a>
			
			<a class=slide href=# title="title of article">
				<img class=overlay src=http://placehold.it/468x350 alt="title of article" width=468 height=350>
				<img class=background src=../img/blank.gif style=background-image:url(http://placehold.it/468x350 alt="title of article" width=468 height=350>
			</a>
			
			<a class=slide href=# title="title of article">
				<img class=overlay src=http://placehold.it/468x350 alt="title of article" width=468 height=350>
				<img class=background src=../img/blank.gif style=background-image:url(http://placehold.it/468x350 alt="title of article" width=468 height=350>
			</a>
			
			<a class=slide href=# title="title of article">
				<img class=overlay src=http://placehold.it/468x350 alt="title of article" width=468 height=350>
				<img class=background src=../img/blank.gif style=background-image:url(http://placehold.it/468x350 alt="title of article" width=468 height=350>
			</a>
			
			<a class=slide href=# title="title of article">
				<img class=overlay src=http://placehold.it/468x350 alt="title of article" width=468 height=350>
				<img class=background src=../img/blank.gif style=background-image:url(http://placehold.it/468x350 alt="title of article" width=468 height=350>
			</a>
		</div>
		<nav class=carousel-controls>
			<label class=paddle for=slide1></label>
			<label class=paddle for=slide2></label>
			<label class=paddle for=slide3></label>
			<label class=paddle for=slide4></label>
			<label class=paddle for=slide5></label>
		</nav>
		<nav class=carousel-pagination>
			<label class=dot for=slide1></label>
			<label class=dot for=slide2></label>
			<label class=dot for=slide3></label>
			<label class=dot for=slide4></label>
			<label class=dot for=slide5></label>
		</nav>
	</figure>
</div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}