JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<div id="slideshow-1">
    <p>
        <a href="#" class="cycle-prev">&laquo; prev</a> | <a href="#" class="cycle-next">next &raquo;</a>
        <span class="custom-caption"></span>
    </p>
    <div id="cycle-1" class="cycle-slideshow"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-prev="#slideshow-1 .cycle-prev"
        data-cycle-next="#slideshow-1 .cycle-next"
        data-cycle-caption="#slideshow-1 .custom-caption"
        data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}"
        data-cycle-fx="tileBlind"
        >
        <div><img src="http://malsup.github.io/images/beach1.jpg" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach2.jpg" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach3.jpg" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach4.jpg" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach5.jpg" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach6.jpg" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach7.jpg" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach8.jpg" width=500 height=500></div>
        <div><img src="http://malsup.github.io/images/beach9.jpg" width=500 height=500></div>
    </div>
</div>

<div id="slideshow-2">
    <div id="cycle-2" class="cycle-slideshow"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-prev="#slideshow-2 .cycle-prev"
        data-cycle-next="#slideshow-2 .cycle-next"
        data-cycle-caption="#slideshow-2 .custom-caption"
        data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}"
        data-cycle-fx="carousel"
       ...

CSS

#cycle-2 .cycle-slide img { border:3px solid #fff; }
#cycle-2 .cycle-slide-active img { border:3px solid #ff0000; }

JavaScript

jQuery(document).ready(function($){

var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
    // advance the other slideshow
    slideshows.not(this).cycle('goto', opts.currSlide);
});

$('#cycle-2 .cycle-slide').click(function(){
    var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
    slideshows.cycle('goto', index);
});

});

//Replace Transisions function with this:

$.fn.cycle.transitions.carousel.transition = function( opts, curr, next, fwd, callback ) {
        var moveBy, props = {};
        var hops = opts.nextSlide - opts.currSlide;
        var vert = opts.carouselVertical;
        var speed = opts.speed;
		var offset = 2; //Number of slides to offset
        // handle all the edge cases for wrapping & non-wrapping
        if ( opts.allowWrap === false ) {
            fwd = hops > 0;
            var currSlide = opts._currSlide;
            var maxCurr = opts.slideCount - (opts.carouselVisible - offset);
			var minCurr = opts.slideCount - (opts.carouselVisible + offset);
            if ( hops > 0 && opts.nextSlide > maxCurr && currSlide == maxCurr ) {
                hops = 0;
            }
			else if (hops > 0 && opts.nextSlide <= minCurr){
				hops = 0;
			}
            else if ( hops > 0 && opts.nextSlide > maxCurr ) {
                hops = opts.nextSlide - currSlide - (opts.nextSlide - maxCurr);
            }
            else if (hops > 0 && opts.currSlide < minCurr && opts.nextSlide > minCurr){
                 hops = opts.nextSlide - minCurr;   
            }
            else if ( hops < 0 && opts.currSlide > maxCurr && opts.nextSlide > maxCurr ) {
                hops = 0;
            }
            else if ( hops < 0 && opts.currSlide > maxCurr ) {
                hops += opts.currSlide - maxCurr;
            }
			else if (hops < 0 && opts.currSlide <= minCurr){
				hops = 0;
			}
            else if (hops < 0 && opts.nextSlide < minCurr){
                 hops = opts.nextSlide - minCurr;   
     ...