JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<a type="button" id="advance-slides" style="position: absolute;top: 50%;float: right;right: 0;max-height: 10%;"><img src="https://octolopagon.games/_resources/img/advance_arrow.png"></a>
<a type="button" id="unadvance-slides" style="transform: scaleX(-1);position: absolute;top: 50%;float: left;left: 0;max-height: 10%;"><img src="https://octolopagon.games/_resources/img/advance_arrow.png"></a>
<div id="picslider" style="height: 100%">
  <a href="#" class="fullheight"><img src="https://octolopagon.games/_resources/img/olumian.png" class="backimg"></a>
  <a href="#" class="fullheight"><img src="https://octolopagon.games/_resources/img/support.png" class="backimg"></a>
</div>

CSS

.fullheight {
  height: 100%;
}

.backimg {
  height: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  right: 50%;
  left: 50%;
}

.slick-track {
  height: 400px;
}

JavaScript

$(document).ready(function() {
  $('#picslider').slick({
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    fade: true,
    speed: 500,
    dots: true,
    cssEase: 'linear',
    nextArrow: "#advance-slides",
    prevArrow: "#unadvance-slides"
  });
});