JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-container">
  <div class="inner-container">
    <div class="back arrow"></div>
    <div class="forward arrow"></div>
    <div class="list">
      <div>
        <div class="logo">
          <span class="big">lol</span><br>
          <span>Hello, im logo</span>
        </div>
      </div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </div>
</div>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body, html {
  width: 100%;
  height: 100%;
}

.main-container {
    max-height: 752px;
    max-width: 1280px;
    position: absolute;
}

.inner-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.list {
    display: inline-block;
    font-size: 0;
    height: 100%;
    min-width: 100%;
    overflow: hidden;
    position: relative;
    right: 0;
    transition: all 0.5s ease 0s;
    white-space: nowrap;
}

.list > div {
    background-image: url("http://nukethefridge.com/wp-content/uploads/2015/04/image84.jpg");
    background-size: cover;
    box-sizing: padding-box;
    display: inline-block;
    font-size: 15px;
    height: 100%;
    max-height: 752px;
    max-width: 1280px;
    padding: 0.7% 1.3% 0.3%;
}
.arrow {
    background-image: url("/img/page/arrow.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40% auto;
    height: inherit;
    position: absolute;
    width: 6%;
    z-index: 2;
}
.arrow:hover, .arrow:active {
    background-color: rgba(0,0,0,0.1);
    cursor: pointer;
}

.back {
    left: 0;
}
.forward {
    right: 0;
    transform: rotate(180deg);
}

.list > div .logo {
    color: white;
    display: inline-block;
    line-height: 5vmin;
    padding: 1.5% 0 0 3%;
    position: relative;
}

.list > div .logo .big::after {
    content: "®";
    display:...

JavaScript

var slider = {};
$(document).ready(function () {
    slider.main = $( document.getElementsByClassName('main-container')[0] ), 
    slider.list = $( document.querySelector('.main-container .list') ),
    slider.slides = [],
    slider.current = 0,
    ratio = 1280/752,
    sheet = (function() {
      var style = document.createElement("style");
      style.appendChild(document.createTextNode(""));
      document.head.appendChild(style);
      return style.sheet;
    })();
    slider.init();
    $( window ).resize(slider.adjust);
    $.each(slider.main.find('div.list > div'), function(a,b) {
        slider.slides[a] = a;
        b.setAttribute('id','slide-'+a);
    })
    window.addEventListener('keypress',function(e) {
        if (e.keyCode == 39 || e.keyCode == 37) {
            target = slider.slides[slider.current+(e.keyCode-38)];
          if (typeof target == 'number') {
            slider.current = target;
            slider.list.css('right',target*100+'%');
          }
        }
    })
  $('.arrow').each(function(i,el) {
    var dir = el.getAttribute('class').split(' ')[0];
    var s = (dir == 'back') ? -1 : 1;
    el.addEventListener('click',(function(s) {
      return function() {
        target = slider.slides[slider.current+s];
        if (typeof target == 'number') {
          slider.current = target;
          slider.list.css('right',target*100+'%');
        }
      }
    })(s));
  })
});
slider.init = function() {
  var ww = $( window ).width(), wh = $( window ).height();
  if (ww > wh) {
    if (wh*ratio > ww) 
      sheet.insertRule('.main-container, .list > div { height:'+ww*(1/ratio)+'px; width:'+ww+'px; }',0);
    else 
      sheet.insertRule('.main-container, .list > div { height:'+wh+'px; width:'+wh*ratio+'px; }',0);
  } else {
    sheet.insertRule('.main-container, .list > div { height:'+ww*(1/ratio)+'px; width:'+ww+'px; }',0);
  }
}
slider.adjust = function() {
  var ww = $( window ).width(), wh = $( window ).height();
 ...