CSS only slider

This is a work in progress but i wanted to show that a slider was possible with CSSonly and adjacent selectors.

HTML

<div class="container">
     <h1>CSS3 Slider</h1>

    <div class="slider">
        <div class="slider-mask">
            <ul class="slider-ul">
                <input type="radio" name="slider" id="slider-1" class="slider-radio" checked>
                <li class="slider-li">
                    
                    <label for="slider-2"></label>
                    <img src="http://placehold.it/680x320.png/00f/fff&text=Image%201"
                    alt="Image 1">
                </li>
                <input type="radio" name="slider" id="slider-2" class="slider-radio">
                <li class="slider-li">
                    <label for="slider-1"></label>
                    <label for="slider-3"></label>
                    <img src="http://placehold.it/680x320.png/0ff/fff&text=Image%202"
                    alt="Image 2">
                </li>
                <input type="radio" name="slider" id="slider-3" class="slider-radio">
                <li class="slider-li">
                    <label for="slider-2"></label>
                    <label for="slider-4"></label>
                    <img src="http://placehold.it/680x320.png/ff0/000&text=Image%203"
                    alt="Image 3">
                </li>
                <input type="radio" name="slider" id="slider-4" class="slider-radio">
                <li class="slider-li">
                    <label for="slider-3"></label>
                    <label for="slider-5"></label>
                    <img src="http://placehold.it/680x320.png/000/fff&text=Image%204"
                    alt="Image 4">
                </li>
                <input type="radio" name="slider" id="slider-5" class="slider-radio">
                <li class="slider-li">
                    <label for="slider-4"></label>
                    <label for="slider-1"></label>
                    <img src="http://placehold.it/888/fff&text=Image%205"
                    alt="Image 5">
                </li>
            </ul>
        </div>
   ...

CSS

/* Common */
 html, body {
    background:#fff;
    font-size:12px;
    font-family:"Verdana", Geneva, sans-serif;
    min-width:960px;
    margin:0;
    padding:0;
    color:#aaa;
}
h1 {
    font-size:48px;
    color:#000;
    text-align:center;
}
/* LAYOUT */
 .container {
    margin:0 auto;
    overflow:hidden;
    width:960px;
}
/* SLIDER */
 .slider {
    width:350px;
    height:180px;
    margin:10px auto 0;
}
.slider-mask {
    overflow:hidden;
    height:180px;
}
.slider-ul {
    margin:0;
    padding:0;
    position:relative;
    width:350px;
    height:180px;
}
.slider-li {
    width:350px;
    height:180px;
    position:absolute;
    left:350px;
    list-style:none;
    z-index:1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.slider-li label {
    position: absolute;
    top: 0;
    left: -9999px;
    right:auto;
    height: 100%;
    width: 50%;
    background: transparent;
    cursor: pointer;
}
.slider-li label:after {
    content:'';
    border-radius: 20%;
    height: 50px;
    width: 50px;
    font-size: 48px;
    color:#d3d3d3;
    display: block;
    line-height: 48px;
    position: absolute;
    margin: 45% 0;
    z-index: -1;
}
.slider-li label:first-child + label:after {
    content:'\25BA';
    right: 0;
}
.slider-li label:first-child:after {
    content:'\25C4';
    left: 0;
}
.slider-radio:checked + .slider-li label {
    z-index: 1;
}
.slider-radio:checked + .slider-li label:first-child {
    content:'\25C4';
    left: 0;
    right: auto;
}
.slider-radio:checked + .slider-li label:first-child + label {
    content:'\25BA';
    right: 0;
    left: auto;
}
.slider-radio {
    position:absolute;
    left:-9999px;
}
.slider-radio:checked+.slider-li {
    left:0;
}