JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script> 

<a href="#" id="prev">Prev</a>
<a href="#" id="next">Next</a>


<div id="social-MegaWrapper">
    <div class="entry">
        <span>4 Text content here Text content here Text content hereText content here Text content here Text content here Text content here Text content here Text content here Text content here</span>
    </div>
    <div class="entry">
        <span>3 Text content here</span>
    </div>
</div>

CSS

.entry {
    border: 0px solid #000;
    width: 500px;
    height: 100px;
    position: relative;
    border: 1px solid #000;
}

span {
    background: red;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    position: relative;}

JavaScript

$(function() {





    $('#social-MegaWrapper span').each(function() {
        var height = $(this).parent().height();
        var elheight = $(this).height();
        var top = (height - elheight) / 2;
        $(this).css({
            top: top
        });
    });

    $('#social-MegaWrapper').cycle({
        next: "#next",
        prev: "#prev",
        timeout: 0,
        fx: 'scrollVert',
        speed: 200,
        nowrap: 1,
        rev: 0,
        end: function() {
            $('#next').fadeTo('fast', .5);
        }
    });
});