JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<ul id="mycarousel" class="jcarousel-skin-dy">
                          <li>
                              <img src="/images/invite-green-small.png" alt=""><br>
                              <p class="title">Title goes here</p>
                          </li>
                          <li>
                              <img src="/images/invite-city-small.png" alt=""><br>
                              <p class="title">Title goes here</p>
                          </li>
                          <li>
                              <img src="/images/invite-green-small.png" alt=""><br>
                              <p class="title">Title goes here</p>
                          </li>
                       </ul>
                       <div class="carousel-nav cf">
                           <table>
                               <tr>
                                   <td><a href="#" id="mycarousel-prev">&#x25C0;</a></td>
                                   <td>
                                       <div class="jcarousel-control">
                                         <a href="#">&bull;</a>
                                         <a href="#">&bull;</a>
                                         <a href="#">&bull;</a>
                                       </div>
                                   </td>
                                   <td><a href="#" id="mycarousel-next">&#x25BA;</a></td>
                               </tr>
                           </table>
                       </div>

CSS

.jcarousel-skin-dy .jcarousel-container-horizontal { width: 440px; }

.jcarousel-skin-dy .jcarousel-clip { overflow: hidden; }

/* clip */
.jcarousel-skin-dy .jcarousel-clip-horizontal { width: 460px; height: 200px; }

/* each item */
.jcarousel-skin-dy .jcarousel-item { width: 220px; height: 200px; }

.jcarousel-skin-dy .jcarousel-item-horizontal { margin-left: 0; margin-right: 10px; }

.jcarousel-skin-dy .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 10px; margin-right: 0; }

.jcarousel-skin-dy .jcarousel-item-placeholder { background: #fff; color: #000; }

/** Horizontal Buttons */
.jcarousel-skin-dy .jcarousel-next-horizontal { width: 32px; height: 32px; cursor: pointer; background: transparent url(next-horizontal.png) no-repeat 0 0; float: right; margin-right: 180px; }

.jcarousel-skin-dy .jcarousel-direction-rtl .jcarousel-next-horizontal { left: 5px; right: auto; background-image: url(prev-horizontal.png); }

.jcarousel-skin-dy .jcarousel-next-horizontal:hover, .jcarousel-skin-dy .jcarousel-next-horizontal:focus { background-position: -32px 0; }

.jcarousel-skin-dy .jcarousel-next-horizontal:active { background-position: -64px 0; }

.jcarousel-skin-dy .jcarousel-next-disabled-horizontal, .jcarousel-skin-dy .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-dy .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-dy .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; }

.jcarousel-skin-dy .jcarousel-prev-horizontal { width: 32px; height: 32px; cursor: pointer; background: transparent url(prev-horizontal.png) no-repeat 0 0; float: left; margin-left: 170px; }

.jcarousel-skin-dy .jcarousel-direction-rtl .jcarousel-prev-horizontal { left: auto; right: 5px; background-image: url(next-horizontal.png); }

.jcarousel-skin-dy .jcarousel-prev-horizontal:hover, .jcarousel-skin-dy .jcarousel-prev-horizontal:focus { background-position: -32px 0; }

.jcarousel-skin-dy...

JavaScript

function mycarousel_initCallback(carousel) {
        jQuery('.jcarousel-control a').bind('click', function() {
            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
            return false;
        });

        jQuery('.jcarousel-scroll select').bind('change', function() {
            carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
            return false;
        });

        jQuery('#mycarousel-next').bind('click', function() {
            carousel.next();
            return false;
        });

        jQuery('#mycarousel-prev').bind('click', function() {
            carousel.prev();
            return false;
        });
    };

    // Ride the carousel...
    jQuery(document).ready(function() {
        jQuery("#mycarousel").jcarousel({
            scroll: 1,
            initCallback: mycarousel_initCallback,
            // This tells jCarousel NOT to autobuild prev/next buttons
            buttonNextHTML: null,
            buttonPrevHTML: null
        });
    });