title: Automatic slideshow
body: <p>I'm trying to make an automatic slideshow that has images sliding from the right to the left. I'm doing this using the css animation property and it works fine exept that the images that are in overflow (can't fit into the div) don't show unless they can fit into the div (get out of overflow).</p>
  
  <p>I'm trying to make similar to the one this page <a href="http://merceza.ba/" rel="nofollow noreferrer">http://merceza.ba/</a>.</p>
  
  <p>How should I fix this and are there any suggetions about improving my code?</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>#slideshow {
    position: absolute;
    height: 50%;
    overflow: hidden;
    margin: 50px auto;
    padding: 5px;
    background: white;
    animation: mymove 5s infinite;
    display: inline-block;
  }
  
  @keyframes mymove {
    from {
      left: 0px;
    }
    to {
      left: -50%;
    }
  }
  
  #slideshow img {
    height: 100%;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="slideshow"&gt;
    &lt;img id="img1" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-104460427800131820417953145028972251922699o.jpg" alt="1" /&gt;
    &lt;img id="img2" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-1280604010428385624259212436923590074138462n2.jpg" alt="2" /&gt;
    &lt;img id="img3" src="http://merceza.ba/assets/Uploads/_resampled/croppedimage960430-104314338351551398609326633168164979199746n2.jpg" alt="3" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>