title: make image slider full-width responsive
body: <p>I'm trying to make an image slider that is full-width responsive with HTML and CSS only. I am stuck at the moment on how to make the slider full-width responsive. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slides {
    padding: 0;
    width: 868px;
    height: 637px;
    display: block;
    margin: auto;
    position: relative;
  }
  
  .slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
  }
  
  .slides input {
    display: none;
  }
  
  .slide-container {
    display: block;
  }
  
  .slide {
    top: 0;
    opacity: 0;
    width: 868px;
    height: 637px;
    cursor: pointer;
    display: block;
    position: absolute;
    transition: all .7s ease-in-out;
  }
  
  .slides img {
    width: 100%;
    height: 100%;
  }
  
  .nav label {
    height: 100%;
    display: none;
    position: absolute;
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 50pt;
    text-align: center;
    padding: 16px;
    line-height: 637px;
  }
  
  .slide:hover+.nav label {
    opacity: 0.5;
  }
  
  .nav .next {
    right: 0;
  }
  
  input:checked+.slide-container .slide {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
  }
  
  input:checked+.slide-container .nav label {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="slides"&gt;
    &lt;input type="radio" name="radio-btn" id="img-1" checked /&gt;
    &lt;li class="slide-container"&gt;
      &lt;div class="slide"&gt;
        &lt;img id src="assets/images/Slide/bilhete.png" /&gt;
      &lt;/div&gt;
      &lt;div class="nav"&gt;
        &lt;label for="img-6" class="prev"&gt;&amp;#x2039;&lt;/label&gt;
        &lt;label for="img-2" class="next"&gt;&amp;#x203a;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  
    &lt;input type="radio" name="radio-btn" id="img-2" /&gt;
    &lt;li class="slide-container"&gt;
      &lt;div class="slide"&gt;
        &lt;img src="assets/images/Slide/aplausos.png" /&gt;
      &lt;/div&gt;
      &lt;div class="nav"&gt;
        &lt;label for="img-1" class="prev"&gt;&amp;#x2039;&lt;/label&gt;
        &lt;label for="img-3" class="next"&gt;&amp;#x203a;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  
    &lt;input type="radio" name="radio-btn" id="img-3" /&gt;
    &lt;li class="slide-container"&gt;
      &lt;div class="slide"&gt;
        &lt;img src="assets/images/Slide/Pa%C3%A7os.png" /&gt;
      &lt;/div&gt;
      &lt;div class="nav"&gt;
        &lt;label for="img-2" class="prev"&gt;&amp;#x2039;&lt;/label&gt;
        &lt;label for="img-4" class="next"&gt;&amp;#x203a;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  
    &lt;input type="radio" name="radio-btn" id="img-4" /&gt;
    &lt;li class="slide-container"&gt;
      &lt;div class="slide"&gt;
        &lt;img src="assets/images/Slide/natal.png" /&gt;
      &lt;/div&gt;
      &lt;div class="nav"&gt;
        &lt;label for="img-3" class="prev"&gt;&amp;#x2039;&lt;/label&gt;
        &lt;label for="img-5" class="next"&gt;&amp;#x203a;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  
    &lt;input type="radio" name="radio-btn" id="img-5" /&gt;
    &lt;li class="slide-container"&gt;
      &lt;div class="slide"&gt;
        &lt;img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="nav"&gt;
        &lt;label for="img-4" class="prev"&gt;&amp;#x2039;&lt;/label&gt;
        &lt;label for="img-6" class="next"&gt;&amp;#x203a;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  
    &lt;input type="radio" name="radio-btn" id="img-6" /&gt;
    &lt;li class="slide-container"&gt;
      &lt;div class="slide"&gt;
        &lt;img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="nav"&gt;
        &lt;label for="img-5" class="prev"&gt;&amp;#x2039;&lt;/label&gt;
        &lt;label for="img-1" class="next"&gt;&amp;#x203a;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is going to be appreciated. I have to use CSS and HTML only.</p>