JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

            
			 <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
             <div class="connected-carousels">
                <div class="stage">
                    <div class="carousel carousel-stage">
                        <ul>
                            <li><img src="img/img1.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img2.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img3.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img4.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img5.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img6.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img5.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img4.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img3.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img2.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img1.jpg" width="475" height="400" alt=""></li>
                            <li><img src="img/img4.jpg" width="475" height="400" alt=""></li>
                        </ul>
                    </div>
                    <a href="#" class="prev prev-stage"><span>&lsaquo;</span></a>
                    <a href="#" class="next next-stage"><span>&rsaquo;</span></a>
                </div>

                <div class="navigation">
                    <a href="#"...

CSS

/** Stage container **/

.connected-carousels .stage {
    width: 475px;
    margin: 20px auto;
    position: relative;
}

.connected-carousels .photo-credits {
    position: absolute;
    left: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

.connected-carousels .photo-credits a {
    color: #fff;
}

/** Navigation container **/

.connected-carousels .navigation {
    width: 475px;
    margin: 20px auto;
    position: relative;
}

/** Shared carousel styles **/

.connected-carousels .carousel {
    overflow: hidden;
    position: relative;
}

.connected-carousels .carousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.connected-carousels .carousel li {
    float: right;
}

/** Stage carousel specific styles **/

.connected-carousels .carousel-stage {
    height: 400px;
}

/** Navigation carousel specific styles **/

.connected-carousels .carousel-navigation {
    height: 84px;
    width: 455px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px;
}

.connected-carousels .carousel-navigation li {
    cursor: pointer;
    border-left: 1px solid #ddd;
    padding-right: 3px;
    padding-left: 3px;
}

.connected-carousels .carousel-navigation li img {
    display: block;
}

.connected-carousels .carousel-navigation li.active img {
    border-color: #ccc;
}

/** Stage carousel controls **/

.connected-carousels .prev-stage,
.connected-carousels .next-stage {
    display: block;
    position: absolute;
    top: 0;
    width: 305px;
    height: 410px;
    color: #fff;
}

.connected-carousels .prev-stage {
    right: 0;
}

.connected-carousels .next-stage {
    left: 0;
}

.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
    display: none;
}

.connected-carousels .prev-stage span,
.connected-carousels .next-stage span {
    display: none;
    position: absolute;
    top: 50%;
   ...

JavaScript

/*! jCarousel - v0.3.1 - 2014-05-26
* http://sorgalla.com/jcarousel
* Copyright (c) 2014 Jan Sorgalla; Licensed MIT */
(function($) {
    'use strict';

    var jCarousel = $.jCarousel = {};

    jCarousel.version = '0.3.1';

    var rRelativeTarget = /^([+\-]=)?(.+)$/;

    jCarousel.parseTarget = function(target) {
        var relative = false,
            parts    = typeof target !== 'object' ?
                           rRelativeTarget.exec(target) :
                           null;

        if (parts) {
            target = parseInt(parts[2], 10) || 0;

            if (parts[1]) {
                relative = true;
                if (parts[1] === '-=') {
                    target *= -1;
                }
            }
        } else if (typeof target !== 'object') {
            target = parseInt(target, 10) || 0;
        }

        return {
            target: target,
            relative: relative
        };
    };

    jCarousel.detectCarousel = function(element) {
        var carousel;

        while (element.length > 0) {
            carousel = element.filter('[data-jcarousel]');

            if (carousel.length > 0) {
                return carousel;
            }

            carousel = element.find('[data-jcarousel]');

            if (carousel.length > 0) {
                return carousel;
            }

            element = element.parent();
        }

        return null;
    };

    jCarousel.base = function(pluginName) {
        return {
            version:  jCarousel.version,
            _options:  {},
            _element:  null,
            _carousel: null,
            _init:     $.noop,
            _create:   $.noop,
            _destroy:  $.noop,
            _reload:   $.noop,
            create: function() {
                this._element
                    .attr('data-' + pluginName.toLowerCase(), true)
                    .data(pluginName, this);

                if (false === this._trigger('create')) {
                    return this;
...