title: How to create a vertical carousel using plain JavaScript and CSS
body: <p>I am trying to create a vertical carousel using vanilla JavaScript and CSS. I know that jQuery has a carousel library but I want to have a go at building this from scratch using no external libraries. I started off by just trying to move the top image and then I planned to move on to making the next image move. I got stuck on the first image. This is where I need your help, StackOverflowers.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="slider vertical" &gt;
      &lt;img class="first opened" src="http://malsup.github.io/images/beach1.jpg"&gt;
      &lt;img class="opened" src="http://malsup.github.io/images/beach2.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/beach3.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/beach4.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/beach5.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/beach9.jpg"&gt;
  &lt;/div&gt;
  &lt;div class="center"&gt;
      &lt;button id="prev"&gt;∧ Prev&lt;/button&gt;
      &lt;button id="next"&gt;∨ Next&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var next = document.getElementById('next');
  var target = document.querySelector('.first');
  
  next.addEventListener('click', nextImg, false);
  
  function nextImg(){
       if (target.classList.contains('opened')) {
          target.classList.remove('opened');
          target.classList.add('closed');
      } else {
          target.classList.remove('closed');
          target.classList.add('opened');
      }
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.vertical {
      width: 100px;
  }
  
  .slider {
      position: relative;
      overflow: hidden;
      height: 250px;
  
          -webkit-box-sizing:border-box;
         -moz-box-sizing:border-box;
          -ms-box-sizing:border-box;
              box-sizing:border-box;
  
      -webkit-transition:-webkit-transform 1.3s ease;
         -moz-transition:   -moz-transform 1.3s ease;
          -ms-transition:    -ms-transform 1.3s ease;
              transition:        transform 1.3s ease;
  }
  
  .slider img {
      width: 100px;
      height: auto;
      padding: 2px;
  }
  
  .first.closed{
      /* partially offscreen */
      -webkit-transform: translate(0, -80%);
         -moz-transform: translate(0, -80%);
          -ms-transform: translate(0, -80%);
              transform: translate(0, -80%);
  }
  
  .first.opened{
      /* visible */
      -webkit-transform: translate(0, 0%);
         -moz-transform: translate(0, 0%);
          -ms-transform: translate(0, 0%);
              transform: translate(0, 0%);
  }
  </code></pre>
  
  <p>My mode of thinking was:</p>
  
  <ol>
  <li>use classes to move and show content</li>
  <li>use JavaScript to add and remove classes </li>
  </ol>
  
  <p>I think I may not have broken the problem down properly.</p>
  
  <p>This is how I would like it to look: <a href="http://jsfiddle.net/natnaydenova/7uXPx/" rel="noreferrer">http://jsfiddle.net/natnaydenova/7uXPx/</a></p>
  
  <p>And this is my abysmal attempt: <a href="http://jsfiddle.net/6cb58pkr/" rel="noreferrer">http://jsfiddle.net/6cb58pkr/</a></p>