<div class="slider">
  <div class="slider__slide slider__slide--1"></div>
  <div class="slider__slide slider__slide--2"></div>
  <div class="slider__slide slider__slide--3"></div>
  <div class="slider__slide slider__slide--4"></div>
  <div class="slider__slide slider__slide--5"></div>
</div>

<button class="button js-slide-toggle">Next Slide</button>

// Reset
* {
  &,
  &:before,
  &:after {
    box-sizing: border-box;
  }
}


// Slider
$slide-width: 600px;
$slide-height: 400px;
$slide-speed: .3s;
$slide-count: 5;

.slider {
  position: relative;
  width: $slide-width;
  height: $slide-height;
  background-color: #f1f1f1;
  overflow: hidden;
  z-index: 1;
}

.slider__slide {
  position: absolute;
  top: 0;
  left: (100% / 3);
  width: (100% / 3);
  height: 100%;
  background: {
    position: center center;
    repeat: no-repeat;
  }
  transition: all $slide-speed ease-in-out;
  transform: translateY(100%);
  
  &:before,
  &:after {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    transition: all $slide-speed ease-in-out;
    transform: translateY(-200%);
  }
  
  &:before {
    left: -100%;
    background-position: left center;
  }
  
  &:after {
    right: -100%;
    background-position: right center;
  }
  
  &.is-active {
    &,
    &:before,
    &:after {
      transform: translateY(0);
    }
  }
}


// Slides
$slide-url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2719/';
@for $i from 1 through $slide-count {
  .slider__slide--#{$i} {
    &,
  &:before,
    &:after {
      background-image: url(#{$slide-url}vespa-#{$i}.jpg);
    }
  }
}


// Slider Button
.button {
  position: relative;
  top: 0;
  color: #e74c3c;
  line-height: 40px;
  border: 2px solid #e74c3c;
  background: none;
  padding: 0 30px;
  outline: none;
  transition: all .25s ease;
  
  &:hover {
    color: #fff;
    background-color: #e74c3c;
  }
}


// Just for this demo
.slider {
  margin: 10% 0 0 50%;
  transform: translateX(-50%);
}

.button {
  margin: 30px 0 0 50%;
  transform: translateX(-50%);
}

var simpleSlider = function(){

  var currentSlide = 0,
      sliderSlide = $('.slider__slide'),
      slideTotal = sliderSlide.length;

  function cycleSlides() {
    var slide = sliderSlide.eq(currentSlide);
    sliderSlide.removeClass('is-active');
    slide.addClass('is-active');
  }
  
  sliderSlide.first().addClass('is-active');

  $(document).on('click', '.js-slide-toggle', function(){
    currentSlide += 1;
    if (currentSlide > slideTotal - 1) {
      currentSlide = 0;
    }
    cycleSlides();
  });

};

simpleSlider();