JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.cycle/2.99/jquery.cycle.min.js"></script>
<style type="text/css">
.opac {
    filter:alpha(opacity=40);
    opacity: 0.4;
    -moz-opacity:0.4;
    -webkit-opacity:0.4;
    -khtml-opacity:0.4;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 

<a id="prev-top" href="#">&lt;</a>
<ul id="nav">
    <li><a href="#">Top Slideshow 1</a></li>
    <li><a href="#">Top Slideshow 2</a></li>
</ul>
<a id="next-top" href="#">&gt;</a>

<div id="controls">
    <a id="prev" href="#">&lt; Prev</a>
    <a id="next" href="#">Next &gt;</a>
</div>
<div id="slideshow">
    <div class="inner-slideshow">
        <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200">
        <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200">
    </div>
    <div class="inner-slideshow">
        <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200">
        <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200">
        <img src="http://malsup.github.com/images/beach6.jpg" width="200" height="200">
    </div>
</div>

JavaScript

$(document).ready(function() {
    // init and stop the inner slideshows
    var inners = $('.inner-slideshow').cycle().cycle('stop');
    var slideshow = $('#slideshow').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        },
        before: function() {
            // stop all inner slideshows
            inners.cycle('stop');
            // start the new slide's slideshow
            $(this).cycle({
                fx: 'scrollHorz',
                speed: 'fast',
                timeout: 0,
                prev: '#prev',
                next: '#next',
                nowrap: 1,
                after: function() 
                {
                    $('#prev').removeClass('opac');
                    $('#next').removeClass('opac');
                    var countImg = $(this).siblings().size();
                    if ($(this).index() == 0) $('#prev').addClass('opac');
                    if ($(this).index() == countImg) $('#next').addClass('opac');
                }
            });
        }
    });
    $('#nav').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        prev: '#prev-top',
        next: '#next-top',
        nowrap: 1,
        after: function() 
        {
            $("#slideshow").cycle($(this).index());
        }
    });
});