.slider(id="slider-1")
  div Ship
  div Eat
  div Destroy
  div Create
.slider(id="slider-2")
  div Code
  div Pancakes
  div Projects
  div Bacon
  div Everything
.slider(id="slider-3")
  div Before
  div During
  div After
.slider(id="slider-4")
  div Review
  div Hunger 
  div Death
  div Lunch
  div Meltdown

@import url('https://fonts.googleapis.com/css?family=Fira+Mono');

@function rem($pixels, $context: 16) {
  @return #{$pixels/$context}rem;
}

:root {
  --base-font: 'Fira Mono', sans-serif;
  --duration: 1000ms;
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
}

* { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--base-font);
}

.slider {
  position: relative;
  overflow: hidden;
  height: 25vh;
}

.slides-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(calc(var(--current) * -100vw));
  transition: transform 1000ms var(--ease);
}

.slide {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: rem(48) rem(24);
  color: white;
  font-size: 8vmin;

  @for $i from 1 through 5 {
    &:nth-child(#{$i}n) {
      background-color: darken(mediumaquamarine, $i * 4%);
    }
  }
}

.slide-actions {
  position: absolute;
  left: rem(8);
  bottom: rem(8);
  z-index: 3;
  
  button {
    padding: rem(6) rem(12);
    font-family: var(--base-font);
    font-size: rem(12);
    color: white;
    background-color: seagreen;
    border: none;
    border-radius: rem(2);
    
    &:focus {
      outline-color: seagreen;
    }

    &:not(:last-child) {
      margin-right: rem(4);
    }
  }
}

class Slider {
  constructor(el, opts = {}) {
    this.defaults = {
      delay: 3000,
      cls: {
        slideElement: 'slide',
        activeElement: 'slide-active',
        slideActions: 'slide-actions',
        slidesWrapper: 'slides-wrapper'
      },
      controls: {
        previous: { cls: 'slider-previous', text: 'Previous' },
        playback: { cls: 'slider-playback', text: 'Pause' },
        next:     { cls: 'slider-next',     text: 'Next' }
      }
    }
    this.opts = Object.assign(this.defaults, opts);
    this.slider = el;
    this.slides = this.slider.children;
    this.count = this.slides.length - 1;
    this.current = 0;
    this.playing = true;
    this.time = interval(this.opts.delay, this.next.bind(this));
    this.init();
  }

  createWrapper(el, cls) {
    const wrapper = document.createElement(el);
    wrapper.className = cls;
    
    return wrapper;
  }

  setupSlides() {
    const wrapper = this.createWrapper('div', this.opts.cls.slidesWrapper);
    wrapper.classList.add(this.opts.animation);

    [...this.slides].forEach(slide => {
      slide.className = this.opts.cls.slideElement;
      wrapper.appendChild(slide)
    });
    
    this.slider.appendChild(wrapper);
    this.slides = this.slider.querySelectorAll('.slide');
  }
  
  setupControls() {
    const wrapper = this.createWrapper('div', this.opts.cls.slideActions);
            
    Object.keys(this.opts.controls).forEach(control => {
      let btn = document.createElement('button');
      btn.className = this.opts.controls[control].cls;
      btn.innerHTML = this.opts.controls[control].text;
      wrapper.appendChild(btn);
    });
    
    this.slider.appendChild(wrapper);
  }

  next() {
    this.current < this.count ? this.update(this.current + 1) : this.update(0);
  }

  previous() {
    this.current > 0 ? this.update(this.current - 1) : this.update(this.count);
  }

  pause() {
    this.playing = false;
    this.playbackButtonText();
    clearInterval(this.time);
  }

  play() {
    this.playing = true;
    this.playbackButtonText();   
    this.time = interval(this.opts.delay, this.next.bind(this));
  }

  playback() {
    this.playing ? this.pause() : this.play();
  }
  
  playbackButtonText() {
    const el = this.slider.querySelector(`.${this.opts.controls.playback.cls}`);
    return this.playing ? el.innerHTML = 'Pause' : el.innerHTML = 'Play';
  }

  update(i) {
    this.current = i;
    this.slider.style.setProperty('--current', this.current);
    this.slides.forEach((slide, i) => {
      if (i === this.current) slide.classList.add(this.opts.cls.activeElement);
      else slide.classList.remove(this.opts.cls.activeElement);
    });
  }
  
  init() {
    this.setupSlides();
    this.setupControls();
    
    this.slider.addEventListener('click', (e) => {
      if (e.target.classList.contains(this.opts.controls.playback.cls)) {
        this.playback();
      } else if (e.target.classList.contains(this.opts.controls.previous.cls)) {
        this.pause();
        this.previous();
      } else if (e.target.classList.contains(this.opts.controls.next.cls)) {
        this.pause();
        this.next();
      }
    });
  }
}

const slider1 = new Slider(document.getElementById('slider-1'))
const slider2 = new Slider(document.getElementById('slider-2'), { delay: 3600 })
const slider3 = new Slider(document.getElementById('slider-3'), { delay: 3400 })
const slider4 = new Slider(document.getElementById('slider-4'), { delay: 3200 })