title: Css Banner Slider
body: <p>I am starting to learn css and html and on my website I made a banner that looks like this: <a href="https://i.stack.imgur.com/rUzwg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rUzwg.jpg" alt="enter image description here"></a></p>
  
  <p>I was wondering if it is possible to take this example I made and transform it in a banner with a slider with up to 3 images, like this:
  <a href="https://i.stack.imgur.com/WFNN1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WFNN1.jpg" alt="enter image description here"></a></p>
  
  <p>I imagine that it isn't possible with only css, but I know nothing about javascript, I tried a lot of tutorials of sliders but none looked the way I wanted, which is a banner with 100% width.</p>
  
  <p><strong>Can someone help me transform the first image into the second one?</strong></p>
  
  <p><strong>My code:</strong></p>
  
  <p><strong>html:</strong> <code>&lt;div id="banner" class="banner"&gt;&lt;/div&gt;</code></p>
  
  <p><strong>css:</strong> </p>
  
  <pre><code>.banner {
      width: 100%;
      height: 400px;
      margin-top: -20px;
      background: url("http://s2.postimg.org/vtiiv9maf/index_banner.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  </code></pre>
  
  <p><strong>jsfiddle</strong> example of my code: <a href="https://jsfiddle.net/wykknyqf/" rel="nofollow noreferrer">https://jsfiddle.net/wykknyqf/</a></p>