JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<div class="slider">
</div>

CSS

html, body, div {
  background: #555;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: black;
  text-align: center;
  background: white;
  font-size: 60px;
  font-weight: bold;
}

.slick-slider { margin: 0 !important; }

JavaScript

(function () {
    var images = ['<img src="http://i242.photobucket.com/albums/ff231/bour3/things%20I%20made%20then%20ate/hamburger.jpg" alt="" title=""/>', '<img src="http://i1037.photobucket.com/albums/a452/drmadvertising/Peninsula%20Papers/Peninsula%20Puzzles/HibachiGrillPuzz.jpg" alt="" title=""/>', '<img src="http://i1360.photobucket.com/albums/r653/brylans2013/Brylans%20Cafe%20Advertisment/9f34ef72-615e-45e9-a182-ec0c670f63a6_zps7d960dc7.jpg" alt="" title=""/>'];     
    
    var input = 'this is a series of words that you choose to like or dislike'.split(' '); // test
    
    var carousel = $('.slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        onBeforeChange: function (slider) {
            /** Super hacky... if you check direction at this point, you know which way we're going. */
            carousel.direction = slider.swipeDirection();
        },
        onAfterChange: function (slider, index) {
            if (slider.currentSlide === 1) {
                
                /** If you successfully swiped to the second item, clean up the first item and add the next item. */
                var previousImage = carousel.removePreviousImage();
                carousel.addNextImage();
                
                /** Fire event nope or yup based on direction. */
                if (previousImage) {
                    if (carousel.direction === 'left') { carousel.trigger('nope', [previousImage]); }
                    else { carousel.trigger('yup', [previousImage]); }
                }
                
            }
        }
    });
    
    carousel.addNextImage = function () {
        var nextImage = images.shift();
        this.images = this.images || [];
        this.images.push(nextImage);
        this.slickAdd($('<div>', { text: nextImage }));
    };
    
    carousel.removePreviousImage = function () {
        var previousImage = this.images.shift();
        this.slickRemove(0);
        return previousImage;
    };
    
...