title: Reverse next functionality to create previous slide functionality
body: <p>I have created a very basic carousel. Currently I have used a bit of jQuery code to create the next slide functionality. Although the previous slide functionality is proving to be more tricky. The problem I think is the first slide does not have a slide before it at the start of the DOM and this is causing some confusion.</p>
  
  <p>I have tried prepending the elements on page load and I have also tried prepending the items on click of the previous button.</p>
  
  <pre><code>&lt;div class="carousel"&gt;
    &lt;div class="carousel__item"&gt;
      test1 left
    &lt;/div&gt;
    &lt;div class="carousel__item carousel__item--active"&gt;
      test2 active
    &lt;/div&gt;
    &lt;div class="carousel__item"&gt;
      test3 right
    &lt;/div&gt;
    &lt;div class="carousel__item"&gt;
      test4
    &lt;/div&gt;
    &lt;div class="carousel__item"&gt;
      test5
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button class="next"&gt;
    next
  &lt;/button&gt;
  &lt;button class="prev"&gt;
    prev
  &lt;/button&gt;
  
  $('.carousel__item--active').prev().addClass('carousel__item--left');
    $('.carousel__item--active').next().addClass('carousel__item--right');
  
  $('.next').on('click', function() {
    var activeSlide = $('.carousel__item--active');
    $('.carousel__item--left').removeClass('carousel__item--left');
    activeSlide.removeClass('carousel__item--active').addClass('carousel__item--left');
    $('.carousel__item--right').removeClass('carousel__item--right').addClass('carousel__item--active');
    $('.carousel__item--active').next().addClass('carousel__item--right');
    $('.carousel__item--active').prev().addClass('carousel__item--left');
    $('.carousel').append($('.carousel__item--left').prevAll())
  })   
  
  $('.prev').on('click', function() {
    var activeSlide = $('.carousel__item--active');
  
    $('.carousel__item--left').removeClass('carousel__item--left').addClass('carousel__item--active');
    activeSlide.removeClass('carousel__item--active').addClass('carousel__item--left');
    $('.carousel__item--right').removeClass('carousel__item--right');
    $('.carousel__item--active').next().addClass('carousel__item--right');    
    $('.carousel__item--active').prev().addClass('carousel__item--left');
    $('.carousel').prepend($('.carousel__item--right').nextAll());
  }) 
  </code></pre>
  
  <p>Please find a codepen example. <a href="https://codepen.io/anon/pen/qLLrjg?editors=1010" rel="nofollow noreferrer">https://codepen.io/anon/pen/qLLrjg?editors=1010</a></p>