JSFiddle - React, Tailwind, and code Playground

by lucuma

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.min.js"></script>
<div id="sliders">
<div id="slideshow">
    
    <div><img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" title="my really long title"/></div>
<div>
<img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" title="my really long title" />
    </div>
<div>
<img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" title="my really long title" />
    </div>
</div>
<div id="pager"></div>

</div>

CSS

#slideshow {width:500px;height:500px;overflow:hidden}
#pager {position:absolute;top:50px;z-index:100}
#pager a {background-color:black;border:1px solid white;padding:10px;display:inline-block}
li {list-type:none}

JavaScript

$('#slideshow').cycle({
    fx: 'scrollVert',
    pager: '#pager',
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + $('img', slide).attr('src') + '" width="50" height="50" /></a></li>';
    }
});
$('#slideshow img').hover(function() {
    $(this).data('title', $(this).attr('title'));
}, function() {
    $(this).attr('title', $(this).data('title'));
});

$('#slideshow img').hover(function() {
    $(this).data('title', $(this).attr('title'));
    $(this).attr('title', '');
}, function() {
    $(this).attr('title', $(this).data('title'));
});