const frame = document.createElement('div');
frame.id = 'frame';

const slider = document.createElement('div');
slider.id = 'slider';
frame.appendChild(slider);

const slides = [1,2,3,4,5];
slides.forEach(function (i) {
  const slide = document.createElement('div');
  slide.className = 'slide';
  slide.style.backgroundImage = 'url(http://lorempixel.com/800/600/animals/'+ i +')';
  slider.appendChild(slide);
});

setSliderWidth(slider);

const prev = document.createElement('button');
prev.id = 'prev';
prev.innerText = 'Previous';
prev.onclick = prevSlide;
frame.appendChild(prev);

const next = document.createElement('button');
next.id = 'next';
next.innerText = 'Next';
next.onclick = nextSlide;
frame.appendChild(next);

document.body.innerHTML = '';
document.body.appendChild(frame);

const Selectors = {
  'body': {
    margin: '0 auto',
    maxWidth: '800px',
  },
  '#frame': {
    height: '50vh',
    overflow: 'hidden',
    position: 'relative',
  },
  '#slider': {
    display: 'flex',
    height: '100%',
    left: 0,
    position: 'absolute',
    transition: 'left 195ms cubic-bezier(0,0,.2,1)',
  },
  '.slide': {
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    flex: 1,
  },
  '#prev': {
    left: 0,
    position: 'absolute',
    top: '50%',
    transform: 'translateY(-50%)',
  },
  '#next': {
    position: 'absolute',
    right: 0,
    top: '50%',
    transform: 'translateY(-50%)',
  }
};

function setSliderWidth (slider) {
  slider.style.width = 100 * slides.length +'%';
}

let currentSlide = 0;

setInterval(nextSlide, 2000);

function nextSlide () {
  if (currentSlide === (slides.length - 1)) {
    currentSlide = 0;
  } else {
    currentSlide++;
  }
  animateSlide();
}

function prevSlide () {
  if (currentSlide === 0) {
    currentSlide = slides.length - 1;
  } else {
    currentSlide--;
  }
  animateSlide();
}

function animateSlide () {
  document.getElementById('slider').style.left = currentSlide * -100 +'%';
}

window.addEventListener('resize', function () {
  setSliderWidth(document.getElementById('slider'));
});

// document.addEventListener('DOMContentLoaded', function () {
  for (Selector in Selectors) {
    const nodes = document.querySelectorAll(Selector);
    for (let i = 0; i < nodes.length; i++) {
      const style = Selectors[Selector];
      for (key in style) {
        nodes[i].style[key] = style[key];
      }
    }
  }
// });