HTML - Slider 2

Segundo Slider con un diseño agradable con css

HTML

<ul class="slides">

      <input type="radio" name="radio-btn" id="img-1" checked />

      <li class="slide-container">

      <div class="slide">

        <img src="https://images.unsplash.com/photo-149995136044

7-b19be8fe80f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfH

x8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />

          </div>

      <div class="nav">

        <label for="img-6" class="prev">‹</label>

        <label for="img-2" class="next">›</label>

      </div>

      </li>

 

      <input type="radio" name="radio-btn" id="img-2" />

      <li class="slide-container">

          <div class="slide">

            <img src="https://images.unsplash.com/photo-1

525547719571-a2d4ac8945e2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxw

aG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" />

          </div>

      <div class="nav">

        <label for="img-1" class="prev">‹</label>

        <label for="img-3" class="next">›</label>

      </div>

      </li>

 

      <input type="radio" name="radio-btn" id="img-3" />

      <li class="slide-container">

          <div class="slide">

            <img src="https://images.unsplash.com/photo-

1515378960530-7c0da6231fb1?ixlib=rb-4.0.3

&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto

=format&fit=crop&w=870&q=80" />

          </div>

      <div class="nav">

        <label for="img-2" class="prev">‹</label>

        <label for="img-4" class="next">›</label>

      </div>

      </li>

 

   

      <li class="nav-dots">

        <label for="img-1" class="nav-dot" id="img-dot-1"></label>

        <label for="img-2" class="nav-dot" id="img-dot-2"></label>

        <label for="img-3" class="nav-dot" id="img-dot-3"></label>

     

      </li>

  </ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Varela+Round);

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

.slides {

    padding: 0;

    width: 609px;

    height: 420px;

    display: block;

    margin: 0 auto;

    position: relative;

}

.slides * {

    user-select: none;

    -ms-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

    -webkit-user-select: none;

    -webkit-touch-callout: none;

}

.slides input { display: none; }

.slide-container { display: block; }

.slide {

    top: 0;

    opacity: 0;

    width: 609px;

    height: 420px;

    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;

}

.slide img {

    width: 100%;

    height: 100%;

}

.nav label {

    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;

    color: #FFF;

    font-size: 156pt;

    text-align: center;

    line-height: 380px;

    font-family: "Varela Round", sans-serif;

    background-color: rgba(255, 255, 255, .3);

    text-shadow: 0px 0px 15px rgb(119, 119, 119);

}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {

    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 + .slide-container .nav label { display: block; }

.nav-dots {

  width: 100%;

  bottom: 9px;

  height: 11px;

  display: block;

  position: absolute;

  text-align: center;

}

.nav-dots .nav-dot {

  top: -5px;

  width: 11px;

  height: 11px;

  margin: 0 4px;

  position: relative;

  border-radius: 100%;

  display: inline-block;

  background-color: rgba(0, 0, 0, 0.6);

}

.nav-dots .nav-dot:hover {

  cursor: pointer;

  background-color: rgba(0, 0, 0, 0.8);

}

input#img-1:checked ~ .nav-dots label#img-dot-1,

input#img-2:checked ~ .nav-dots label#img-dot-2,

input#img-3:checked ~ .nav-dots label#img-dot-3,

input#img-4:checked ~ .nav-dots label#img-dot-4,

input#img-5:checked ~ .nav-dots label#img-dot-5,

input#img-6:checked ~ .nav-dots label#img-dot-6 {

  background: rgba(0, 0, 0, 0.8);

}