Pure CSS Slider v2

by secretgspot

HTML

<div class="slider">
    <ul class="frames">
        <li id="one" class="slide">
            <img src="http://lorempixel.com/450/200/sports" alt="Slide 1">
            <nav>
                <a class="prev" href="#five">&larr;</a>
                <a class="next" href="#two">&rarr;</a>
            </nav>            
        </li>
        <li id="two" class="slide">
            <img src="http://lorempixel.com/450/200/food" alt="Slide 2">
            <nav>
                <a class="prev" href="#one">&larr;</a>
                <a class="next" href="#three">&rarr;</a>
            </nav>            
        </li>
        <li id="three" class="slide">
            <img src="http://lorempixel.com/450/200/fashion" alt="Slide 3">
            <nav>
                <a class="prev" href="#two">&larr;</a>
                <a class="next" href="#four">&rarr;</a>
            </nav>            
        </li>
        <li id="four" class="slide">
            <img src="http://lorempixel.com/450/200/nature" alt="Slide 4">
            <nav>
                <a class="prev" href="#three">&larr;</a>
                <a class="next" href="#five">&rarr;</a>
            </nav>            
        </li>
        <li id="five" class="slide">
            <img src="http://lorempixel.com/450/200/animals" alt="Slide 5">
            <nav>
                <a class="prev" href="#four">&larr;</a>
                <a class="next" href="#one">&rarr;</a>
            </nav>            
        </li>
        <li class="quicknav">
            <ul>
                <li><a href="#five">&#9679;</a></li>
                <li><a href="#one">&#9679;</a></li>
                <li><a href="#two">&#9679;</a></li>
                <li><a href="#three">&#9679;</a></li>
                <li><a href="#four">&#9679;</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #ddd;
    padding: 100px;
}

/* Slider */

.slider {
    height: 200px;
    margin: 0 auto;
    position: relative;
    width: 450px;
}
.slider .frames {
    height: 200px;
    position: relative;
}
.slider .frames .slide {
    height: 200px;
    list-style: none;
    position: absolute;
    width: 450px;
}
.slider .slide:target {
    z-index: 100;
}
.slider .frames .slide img {
    border-radius: 5px;
}
.slider .frames .slide nav a {
    background: hsla(0,0%,0%,.75);
    color: #fff;
    font-size: 16px;
    line-height: 50px;
    margin-top: -25px;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 50%;
    width: 50px;
    visibility: hidden;
    z-index: 10;
}
.slider .frames:hover .slide nav a {
    opacity: 1;
    visibility: visible;
}
.slider .frames .slide nav .prev {
    border-radius: 0 50px 50px 0;
    left: 0;
}
.slider .frames .slide nav .next {
    border-radius: 50px 0 0 50px;
    right: 0;
}
.slider .frames .slide nav a:hover {
    background: #000;
}
.slider .quicknav {
    font-size: 0;
    position: absolute;
    text-align: center;
    top: 100%;
    width: 100%;
}
.slider .quicknav li {
    display: inline-block;
}
.slider .quicknav a {
    color: #aaa;
    font-size: 20px;
    text-decoration: none;
}
.slider .quicknav a:hover {
    color: #888;
}
.slider #one:target ~ .quicknav a[href="#one"],
.slider #two:target ~ .quicknav a[href="#two"],
.slider #three:target ~ .quicknav a[href="#three"],
.slider #four:target ~ .quicknav a[href="#four"],
.slider #five:target ~ .quicknav a[href="#five"] {
    color: #666;
}