title: Horizontal slideshow using CSS3
body: <p>So I know there's a lot of horizontal slideshows out there but I've tried to follow them and every time there's a problem. Every time it's either really complicated or doesn't work at all for me. So I tried creating my own (sorry for the messy code):
  <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>.wrapper {
   width: 100%;
   height: 35vw;
   margin: auto;
   background: #fff url("https://s-media-cache-ak0.pinimg.com/originals/a4/f2/cb/a4f2cb80ff2ae2772e80bf30e9d78d4c.gif") no-repeat center;
   background-size: 200px 200px;
  }
  
  .slides {
   position: absolute;
   height: 35vw;
   width: 100%;
  }
  
  #slide1{
   background: transparent url("https://www.planwallpaper.com/static/images/hd-wallpaper-1080p-widescreen-1080p-backgrounds.jpg") no-repeat center;
   background-size: cover;
   animation: left1 15s infinite;
  }
  
  #slide2 {
   background: transparent url("https://www.planwallpaper.com/static/images/hd-beach-wallpapers-1080p.jpg") no-repeat center;
   background-size: cover;
   animation: left2 15s infinite;
   left: 100%;
   
  }
  #slide3 {
   background: transparent url("https://www.planwallpaper.com/static/images/01819_birdonabranch_1920x1080.jpg") no-repeat center;
   background-size: cover;
   animation: left3 15s infinite;
   left: 200%;
  }
  
  @keyframes left1 {
  0% {left: 0%; right:0%;}
  26.8% {left: 0%; right:0%;}
  33.5% {left: -100%; right: 100%;}
  93.8% {left: -200%; right: 200%;}
  100% {left: 0%; right: 0%;}
  }
  
  @keyframes left2 {
  0% {left: 100%; right:-100%;}
  26.8% {left: 100%; right:-100%;}
  33.5% {left: 0%; right: 0%;}
  60.3% {left: 0%; right: 0%;}
  67% {left: -100%; right: 100%;}
  93.8% {left: -100%; right: 100%;}
  100% {left: 100%; right: -100%;}
  }
  
  @keyframes left3 {
  0% {left: 200%; right:-200%;}
  26.8% {left: 200%; right:-200%;}
  33.5% {left: 100%; right: -100%;}
  60.3% {left: 100%; right: -100%;}
  67% {left: 0%; right: 0%;}
  93.8% {left: 0%; right: 0%;}
  100% {left: 200%; right: -200%;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
  &lt;div class="wrapper"&gt;
   &lt;div class="slides" id="slide1"&gt;&lt;/div&gt;
   &lt;div class="slides" id="slide2"&gt;&lt;/div&gt;
   &lt;div class="slides" id="slide3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>At first, I thought I was okay. Then I noticed that you're able to scroll horizontally. I tried fixing that by using overflow:hidden in different ways and combinations with display: and position:. Nothing works. Either the images don't get positioned properly or the animations don't work. I never thought positioning elements off-page would be so ridiculously difficult. <br/>
  P.S. I have not studied any web design, I'm self-taught and trying to create a decent website.</p>