JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
<div id="slideshow-1">
    <div id="cycle-1" class="cycle-slideshow"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-caption="#slideshow-1 .custom-caption"
        data-cycle-fx="fade"
        data-cycle-pager="#custom-pager"
        data-cycle-pager-template="<span><a href=#> {{slideNum}} </a></span>"
        >
        <div><img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach2.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach3.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach4.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach5.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach6.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach7.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach8.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach9.jpg"></div>
    </div>
</div>

<div id="carousel">
    <div id="cycle-2" class="cycle-slideshow"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-prev="#carousel .cycle-prev"
        data-cycle-next="#carousel .cycle-next"
        data-cycle-fx="carousel"
       
        data-allow-wrap="false"
        >
        <div><img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach2.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach3.jpg"></div>
        <div><img src="http://jquery.malsup.com/cycle2/images/beach4.jpg"></div>
        <div><img...

CSS

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#cycle-1 div { width:100%; }
#cycle-2 .cycle-slide { border:3px solid #fff; }
#cycle-2 .cycle-slide-active { border:3px solid #004; }

#slideshow-1,#carousel { width: 50%; max-width: 628px; margin: auto }
#carousel { margin-top: 10px; position: relative; }
#carousel div img { width: 150px height: 150px; }
#carousel .cycle-slideshow img { width: 120px; height: auto; display: block; }
#slideshow-1 .cycle-slideshow img { width: 400px;}
.cycle-prev { position:  absolute; left: -50px; top: 50%; }
.cycle-next { position:  absolute; right: -50px; top: 50%; }
#custom-pager { width: 600px; margin: 40px auto; background: #f2f2f2; }
#custom-pager span { display: inline-block; margin: 0 20px; }
.cycle-pager-active{background:#000;}
img.lazy { width: 500px; height: auto; display: block; margin: 0 auto; }

JavaScript

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

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

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