HTML5/CSS3 slider

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in libero magna. Cras felis dolor, commodo quis viverra vel, pretium in est. Nunc interdum libero vitae erat feugiat, sit amet ornare ante tincidunt. Mauris placerat ligula ac lacus sollicitudin,
  vel gravida lorem fringilla. Phasellus vel tempor erat. Quisque sodales consectetur orci. In ornare convallis justo, vel mollis purus tempor vel. Mauris vitae quam eget neque scelerisque scelerisque. Nullam vitae velit id arcu scelerisque dapibus. Aliquam
  iaculis leo et tortor auctor tempor.
</p>
<div class="slider">
  <ul>
    <li class="slide" id="no-js-slider-2">
      <img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo2.jpg" />
      <a href="#no-js-slider-1" class="prev">prev</a>
      <a href="#no-js-slider-3" class="next">next</a>
    </li>
    <li class="slide" id="no-js-slider-3">
      <img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo3.jpg" />
      <a href="#no-js-slider-2" class="prev">prev</a>
      <a href="#no-js-slider-4" class="next">next</a>
    </li>
    <li class="slide" id="no-js-slider-4">
      <img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo4.jpg" />
      <a href="#no-js-slider-3" class="prev">prev</a>
      <a href="#no-js-slider-5" class="next">next</a>
    </li>
    <li class="slide" id="no-js-slider-5">
      <img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo5.jpg" />
      <a href="#no-js-slider-4" class="prev">prev</a>
      <a href="#no-js-slider-6" class="next">next</a>
    </li>
    <li class="slide" id="no-js-slider-6">
      <img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo6.jpg" />
      <a...

CSS

ul li {
      list-style-type: none !important;
      margin: 0!important;
    }
    
    a.prev,
    a.next {
      height: 100px;
      width: 43px;
      opacity: 0.7;
      text-indent: -99999px;
      cursor: pointer;
      -webkit-transition: opacity 200ms ease-out;
    }
    
    a.prev:hover,
    a.next:hover {
      opacity: 1;
    }
    
    .prev {
      left: 0;
      /*  margin-top: 212px;*/
      position: absolute;
      background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -200px 25px;
    }
    
    .next {
      /*margin-top: 212px;*/
      left: 669px;
      position: absolute;
      background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -167px 25px;
    }
    
    .slider {
      margin: 0 !important;
      /*position: relative;*/
      height: 474px;
    }
    
    .slide {
      position: absolute;
      height: 100%;
      width: 100%;
    }
    
    .slider .slide:target {
      z-index: 100;
    }
    
    .slider img {
      margin: 0 !important;
    }