JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.1/jquery.jcarousel.min.js"></script>
<div class="one">
    <p>Text</p>
    <div class="jcarousel">
        <div class="jcarousel-list">
            <div>
                <p><img src="http://www.clipartsfree.net/vector/small/24303-yelling-face-clipart.png" width=50 height=50 /></p>
            </div>
            <div>
                <p>Item2</p>
            </div>
            <div>
                <p>Item3</p>
            </div>
            <div>
                <p>Item4</p>
            </div>
            <div>
                <p>Item5</p>
            </div>
        </div>
    </div>
    
    <div>
        <!-- Prev/next controls --> <a href="#" class="jcarousel-control-prev">&lsaquo; Prev</a>
        <a href="#" class="jcarousel-control-next">Next &rsaquo;</a>
        
        <!-- Pagination -->
        <p class="jcarousel-pagination">
            <!-- Pagination items will be generated in here -->
        </p>
    </div>
</div>
<div class="two">
    <p>ul text</p>
    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul>
                <li>
                    <p>This is Item1</p>
                </li>
                <li>Item2</li>
                <li>Item3</li>
                <li>Item4</li>
                <li>Item5</li>
            </ul>
        </div>
        <div>
            <!-- Prev/next controls --> <a href="#" class="jcarousel-control-prev">&lsaquo; Prev</a>
 <a href="#" class="jcarousel-control-next">Next &rsaquo;</a>

            <!-- Pagination -->
            <p class="jcarousel-pagination">
                <!-- Pagination items will be generated in here -->
            </p>
        </div>
    </div>
</div>
<div class="three">
    <p>ul images</p>
    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul>
                <li>
                    <img src="http://www.clipartsfree.net/vector/small/24303-yelling-face-clipart.png"...

CSS

/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 60px;
    height: 60px;
}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel-list {
    width: 20000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel-list > div {
    /* Required only for block elements like <li>'s */
    float: left;
    width: 60px;
    height: 60px;
}

JavaScript

(function ($) {
    $(function () {
        /*
        Carousel initialization
        */
        $('.jcarousel')
            .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: '-=1'
        });

        /*
         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: '+=1'
        });

        /*
         Pagination initialization
         */
        $('.jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function () {
            $(this).addClass('active');
        })
            .on('jcarouselpagination:inactive', 'a', function () {
            $(this).removeClass('active');
        })
            .jcarouselPagination({
            // Options go here
        });
    });
})(jQuery);