Pure css carousel

example using CSS only

by kmturley

HTML

<div class="carousel">
    <div class="item red slide-in" id="item4" tabindex="4"><h1>Item 4</h1></div>
    <div class="item yellow slide-in" id="item3" tabindex="3"><h1>Item 3</h1></div>
    <div class="item green slide-in" id="item2" tabindex="2"><h1>Item 2</h1></div>
    <input type="checkbox" autofocus="autofocus" tabindex="1" />
    <div class="item red slide-in" id="item1" tabindex="1" autofocus><h1>Item 1</h1></div>
    <div class="controls">
        <a href="#item1" class="btn" tabindex="-1"></a>
        <a href="#item2" class="btn" tabindex="-1"></a>
        <a href="#item3" class="btn" tabindex="-1"></a>
        <a href="#item4" class="btn" tabindex="-1"></a>
    </div>
</div>

CSS

html,
body {
    height: 100%;
}

body {
    margin: 0;
}

.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #333;
}

.carousel .item {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* animations */

.carousel .slide-in {
    -webkit-transform: translate3d(90%, 0px, 0px);
    -moz-transform: translate3d(90%, 0px, 0px);
    -ms-transform: translate3d(90%, 0px, 0px);
    -o-transform: translate(90%, 0px, 0px);
    transform: translate3d(90%, 0px, 0px);
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
    -ms-transition: -ms-transform 0.5s ease-out;
    -o-transition: -o-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    z-index: 1;
}

.carousel .slide-in:target ~ .slide-in,
.carousel .slide-in:focus ~ .slide-in,
.carousel .slide-in:active ~ .slide-in {
    -webkit-transform: translate3d(-90%, 0px, 0px);
    -moz-transform: translate3d(-90%, 0px, 0px);
    -ms-transform: translate3d(-90%, 0px, 0px);
    -o-transform: translate(-90%, 0px, 0px);
    transform: translate3d(-90%, 0px, 0px);
}

.carousel input[type="checkbox"]:focus + .slide-in,
.carousel .slide-in:target,
.carousel .slide-in:focus,
.carousel .slide-in:active {
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    z-index: 3;
}

.carousel .slide-in:target + .slide-in,
.carousel .slide-in:focus + .slide-in,
.carousel .slide-in:active + .slide-in {
    z-index: 2;
}

.carousel .controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
}

.carousel .controls .btn {
    display: inline-block;
    background-color: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius:...