A CodePen by Avi Kohn. CSS image slider w/ next/prev buttons - A 100% pure CSS image slider with previous/next buttons and image transitions. Updated with simplified HTML and CSS, better image transitions and resized images.

index.html

<!-- NOTE: None of the included images are mine and I take no credit for them!! -->
<ul id="body">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li id="img-container">
        <div id="img-inner">
            <img src="http://farm9.staticflickr.com/8043/8098759802_6da1ff5538_z.jpg">
        </div>
        <label for="img-6" class="sb-bignav" title="Previous"></label>
        <label for="img-2" class="sb-bignav" title="Next"></label>
    </li>
    
    <input type="radio" name="radio-btn" id="img-2" />
    <li id="img-container">
        <div id="img-inner">
            <img src="http://farm9.staticflickr.com/8335/8098750377_2522e75807_z.jpg">
        </div>
        <label for="img-1" class="sb-bignav" title="Previous"></label>
        <label for="img-3" class="sb-bignav" title="Next"></label>
    </li>
    
    <input type="radio" name="radio-btn" id="img-3" />
    <li id="img-container">
        <div id="img-inner">
            <img src="http://farm9.staticflickr.com/8053/8098759982_e9ffbf1ac3_z.jpg">
        </div>
        <label for="img-2" class="sb-bignav" title="Previous"></label>
        <label for="img-4" class="sb-bignav" title="Next"></label>
    </li>
    
    <input type="radio" name="radio-btn" id="img-4" />
    <li id="img-container">
        <div id="img-inner">
            <img src="http://farm9.staticflickr.com/8054/8098759930_a1e8fdf396_z.jpg">
        </div>
        <label for="img-3" class="sb-bignav" title="Previous"></label>
        <label for="img-5" class="sb-bignav" title="Next"></label>
    </li>
    
    <input type="radio" name="radio-btn" id="img-5" />
    <li id="img-container">
        <div id="img-inner">
            <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg">
        </div>
        <label for="img-4" class="sb-bignav" title="Previous"></label>
        <label for="img-6" class="sb-bignav" title="Next"></label>
    </li>
    
    <input type="radio" name="radio-btn" id="img-6" />
    <li id="img-container">
        <div id="img-inner">
            <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg">
        </div>
        <label for="img-5" class="sb-bignav" title="Previous"></label>
        <label for="img-1" class="sb-bignav" title="Next"></label>
    </li>
</ul>

style.css

/* NOTE: The next-previous image's are not mine and I take no credit for them!! */

html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); }

ul, li { display: block; }

#body {
    left: 50%;
    width: 609px;
    height: 405px;
    display: block;
    position: absolute;
    margin-left: -305px;
}

#body input { display: none; }

#img-inner {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 405px;
    display: block;
    position: absolute;
    
    transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    
    transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
}

#img-inner img {
    width: 100%;
    height: 100%;
}

#img-inner:nth-of-type(1) {
    /* And... CSS3 image preloading :D */
    background-image:
        url("http://farm9.staticflickr.com/8335/8098750377_2522e75807_z.jpg"),
        url("http://farm9.staticflickr.com/8053/8098759982_e9ffbf1ac3_z.jpg"),
        url("http://farm9.staticflickr.com/8054/8098759930_a1e8fdf396_z.jpg"),
        url("http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg"),
        url("http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg");
}

#img-inner:hover ~ label.sb-bignav { opacity: 0.5; }

label.sb-bignav:hover { opacity: 1; }

.sb-bignav {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;
    
    opacity: 0;
    z-index: 9;
    cursor: pointer;
    
    transition: opacity .2s;
    -moz-transition: opacity .2s;
    -webkit-transition: opacity .2s;
}

label[title="Next"] {
    right: 0;
    background: url('http://www.element17.com/images/nav-right.png') center center no-repeat;
}

label[title="Previous"] {
    background: url('http://www.element17.com/images/nav-left.png') center center no-repeat;
}

input:checked + li > #img-inner {
    opacity: 1;
        
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

input:checked + li > label { display: block; }