JSFiddle - React, Tailwind, and code Playground

by CJBrewer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.1/jquery.jcarousel.min.js"></script>
<div>
     <h1>Text and images in ul / li</h1>

    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul class="carouselList">
                <li class="carouselListItem">
                     <h3> this is the first item </h3>

                    <p>blah blah blah</p>
                    <ul>
                        <li>Some stuff in this item</li>
                        <li>That contains lists!</li>
                        <li>Ooops</li>
                    </ul>
                    <p>blah blah blah</p>
                    <img src="http://www.clipartsfree.net/vector/small/24303-yelling-face-clipart.png" width=50 height=50 />
                    <p>blah blah blah</p>
                </li>
                <li class="carouselListItem">
                     <h3> this is the second item </h3>

                    <p>blah blah blah</p>
                    <p>blah blah blah</p>
                    <img src="http://www.clipartsfree.net/vector/small/23175-lady-face-cartoon-clipart.png" width=50 height=50 />
                    <p>blah blah blah</p>
                </li>
                <li class="carouselListItem">
                     <h3> this is the third item </h3>

                    <p>blah blah blah</p>
                    <p>blah blah blah</p>
                    <img src="http://www.clipartsfree.net/vector/small/22591-people-faces-dog-clipart.png" width=50 height=50 />
                    <p>blah blah blah</p>
                </li>
                <li class="carouselListItem">
                     <h3> this is the fourth item </h3>

                    <p>blah blah blah</p>
                    <p>blah blah blah</p>
                    <img src="http://www.clipartsfree.net/vector/small/20873-smiley-face-clipart.png" width=50 height=50 />
                    <p>blah blah blah</p>
                </li>
                <li...

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: 600px;
}
/*
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 ul.carouselList {
    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 li.carouselListItem {
    /* Required only for block elements like <li>'s */
    float: left;
    width: 500px;
    height: 400px;
}

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);