JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js"></script>
<div class="jcarousel-wrapper">

                <!-- Carousel -->
                <div class="jcarousel">
                    <ul>
                        <li>
                            <img src="http://lorempixel.com/400/200" width="400" height="200" alt="" />
                            <div class="jcarousel-caption">
                                <p>11111 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui elit, feugiat vel augue ornare, scelerisque aliquam diam. Maecenas in velit quis nisl consequat ullamcorper. Ut at erat in nulla auctor pellentesque.</p>
                            </div>
                        </li>
                        <li>
                            <img src="http://lorempixel.com/400/200" width="400" height="200" alt="" />
                            <div class="jcarousel-caption">
                                <p>22222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui elit, feugiat vel augue ornare, scelerisque aliquam diam. Maecenas in velit quis nisl consequat ullamcorper. Ut at erat in nulla auctor pellentesque.</p>
                            </div>
                        </li>
                        <li>
                            <img src="http://lorempixel.com/400/200" width="400" height="200" alt="" />
                            <div class="jcarousel-caption">
                                <p>33333 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui elit, feugiat vel augue ornare, scelerisque aliquam diam. Maecenas in velit quis nisl consequat ullamcorper. Ut at erat in nulla auctor pellentesque.</p>
                            </div>
                        </li>
                        <li>
                            <img src="http://lorempixel.com/400/200" width="400" height="200" alt="" />
         ...

CSS

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 550px;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
    position: relative;
}

.jcarousel-caption{
    position: absolute;
    top: 10px;
    left: 100px;
    width:350px;
    height: 120px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 10px;
    z-index: 200;
    
    display: none;
}

.jcarousel li.target .jcarousel-caption {
    display: block;
}
}

JavaScript

(function($) {
    $(function() {
        /*
        Carousel initialization
        */
          $('.jcarousel')
              // Bind _before_ carousel initialization
              .on('jcarousel:targetin', 'li', function() {
                  $(this).addClass('target');
              })
              .on('jcarousel:targetout', 'li', function() {
                  $(this).removeClass('target');
              })
              .jcarousel({
                  // Options go here
              });

        /*
         Prev control initialization
         */
        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                // Options go here
                target: '-=2'
            });

        /*
         Next control initialization
         */
        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                // Options go here
                target: '+=2'
            });
    });
})(jQuery);