JSFiddle - React, Tailwind, and code Playground

by Phil Everton

HTML

<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.scrollVert.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<div id="upDiv">
    <a href="#" id="upImg"><img src="http://c.dryicons.com/images/icon_sets/stickers_icon_set/png/128x128/up_arrow.png" alt="" width=30 height=30 /></a>
    <p>scroll up</p>
</div>
<div id="prevDiv">
    <a href="#" id="prevImg"><img src="http://c.dryicons.com/images/icon_sets/stickers_icon_set/png/128x128/left_arrow.png" witdh=30 height=30 alt="" /></a>
</div>

<div class="cycle-slideshow outer-slideshow"                         
data-cycle-timeout="0" 
data-cycle-prev="#prevDiv" 
data-cycle-next="#nextDiv"
data-cycle-slides="> div"
data-cycle-center-horz=true
data-cycle-center-vert=true
data-cycle-pager="#thumbnails"
data-cycle-pager-template="<a href=#><img src='{{src}}' height=160 /></a>"
data-cycle-caption="#cycle-caption"
data-cycle-caption-template="<p id=&quot;captionHeader&quot;> {{captionHeader}}</p><p id=&quot;captionText&quot;> {{captionText}}</p>"
>
    <div><img src="http://malsup.github.com/images/p1.jpg" data-cycle-caption-header="Outer Slideshow" data-cycle-caption-text="Slide 1" class="outer-slide" /></div>
    <div><img src="http://malsup.github.com/images/p2.jpg" data-cycle-caption-header="Outer Slideshow" data-cycle-caption-text="Slide 2" class="outer-slide" /></div>                     
    <div><div class="cycle-slideshow outer-slide inner-slideshow" 
    data-cycle-fx="scrollVert"
    data-cycle-allow-wrap=true
    data-cycle-timeout="0"
    data-cycle-prev="#upDiv"
    data-cycle-next="#downDiv"
    data-cycle-center-horz=true
    data-cycle-center-vert=true
    data-cycle-caption="#cycle-caption"
    data-cycle-caption-template="<p id=&quot;captionHeader&quot;> {{captionHeader}}</p><p id=&quot;captionText&quot;> {{captionText}}</p>"		
    data-cycle-pager-template="<a href=# data-cycle-multiple-slide=true><img...

CSS

div.outer-slideshow img, div.inner-slideshow img {
    width:250px;
    height:150px;
}
div.outer-slideshow {
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 45px;
}
div.inner-slideshow {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#prevDiv {
    position: absolute;
    top: 150px;
    left: 15%;
    width: 22px;
    height: 43px;
    z-index:2;
}
#nextDiv {
    position: absolute;
    top: 150px;
    right: 15%;
    width: 22px;
    height: 43px;
    z-index:2;
}
#upDiv {
    width: 43px;
    height: 22px;
    margin-left:auto;
    margin-right:auto;
    font-size:12px;
    margin-top: 5px;
    visibility:collapse;
}
#upDiv p {
    margin-top:0px;
}
#downDiv {
    width: 113px;
    height: 22px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:14px;
    font-size: 12px;
    visibility:collapse;
}
#downDiv img {
    margin-left: 35px;
}
#thumbnails {
    width:1100px;
    height:160px;
    position:relative;
    top:350px;
    white-space: nowrap;
    overflow:hidden;
    margin-left:auto;
    margin-right:auto;
}
a img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    margin-right:2px;
    display:inline;
}
a.cycle-pager-active img {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
#cycle-caption {
    width:680px;
    margin-left:auto;
    margin-right:auto;
    font-size:16px;
    font-family:"Trebuchet MS", tahoma;
}
#captionHeader {
    margin-top:20px;
    margin-bottom:5px;
}
#captionText {
    margin:0;
}

JavaScript

$("#prevImg").click(function () {
    if ($('a.cycle-pager-active').prev().length != 0) {
        var leftPos = $('a.cycle-pager-active').prev().position().left;
        if (leftPos < 0) {
            $('#thumbnails').animate({
                scrollLeft: leftPos - 100
            }, 200);
        }
    } else {
        $('#thumbnails').animate({
            scrollLeft: $('#thumbnails').width()
        }, 200);
    }
});

$("#nextImg").click(function () {
    if ($('a.cycle-pager-active').next().length != 0) {
        var leftPos = $('a.cycle-pager-active').next().position().left;
        var rightPos = leftPos + $('.cycle-pager-active').next().width();
        if (rightPos > 1100) {
            $('#thumbnails').animate({
                scrollLeft: rightPos + 100
            }, 200);
        }
    } else {
        $('#thumbnails').animate({
            scrollLeft: 0
        }, 200);
    }
});

//added this to run the show/hide for up/down, and added `no` to prevent inner show from running the after script from the outer show
no = false;
$('.outer-slideshow').on('cycle-after', function (e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    if (!no) {
        if ($(incomingSlideEl).children('div').children('img').length) {
            $('#upDiv, #downDiv').css('visibility', 'visible');
        } else {
            $('#upDiv, #downDiv').css('visibility', 'collapse');
        }
    } else {
        no = false;
    }
}).find('.inner-slideshow').on('cycle-after', function() { no = true; });