JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css">
<body>
  <div class="carousel">
    <div class="carousel-item bg-red">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
    <div class="carousel-item bg-teal">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
    <div class="carousel-item bg-olive">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
    <div class="carousel-item bg-green">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
    <div class="carousel-item bg-blue">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
  </div>
</body>

CSS

.carousel-item {
  margin: 0 15px;
  padding: 15px;
  color: rgba(255, 255, 255, 0.75);
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

JavaScript

// translate3d change detection
(function($) {
	// use regex to extract x-translation value
  var reg = /-?\d+/g;
  
  $.fn.css = (function(orig) {
    return function CSSTranslateListener() {
      var isTranslate = !!arguments[0]['transform']
      if (!isTranslate) {
        // apply regular changes
        orig.apply(this, arguments);
      } else {
        // is a translate event!
        // trigger an event with a pseudo-resolve that we can call
        // if we want the translation to happen and a the tranlation value
        var evt = new $.Event("slickEdgeTrigger");
        var args = [].slice.call(arguments);
        var resolver = orig.bind.apply(orig, [].concat([this], args))
        $(this).trigger(evt, [resolver, +args[0]['transform'].match(reg)[1]])
      }
    }
  })($.fn.css)
})(jQuery)

$(document).ready(function() {
  var $w = $('.carousel').slick({
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 2,
    slidesToScroll: 1
   }).width();
   
  $('.carousel').on('slickEdgeTrigger', function(evt, fn, by) {
  	if(by >= ($w - $('.slick-track').width()) && by <= 0){
    	fn()
    }
  })
});