JSFiddle - React, Tailwind, and code Playground

HTML

<div class="placeholder">
        <div class="content">
        <ul id="items">
            <li>
                <div class="itemplaceholder">
                <img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/>
                    <p>
                        Test title<br/>
                        Description A
                        <a href="#">Link</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <span>
                <img src="http://www.aja.com/images/software/AJA_TestIconNEW.png"/>
                    <p>
                        Little bit longer title for test<br/>
                        Another description that is longer
                        <a href="#">Link</a>
                    </p>
                    </span>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <img src="http://ce.byu.edu/cw/testprep/images/testDrive.jpg"/>
                    <p>
                        Title 3<br/>
                        Lorem ipsum
                    <a href="#">Link</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/>
                    <p>
                        Title<br/>
                        Text
                        <a href="#">Link</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <img src="http://ce.byu.edu/cw/testprep/images/testDrive.jpg"/>
                    <p>
                        Title title title<br/>
                        Lorem ipsum
                        <a href="#">Link</a>
                    </p>
                </div>
           ...

CSS

#items {
    display: inline;
    position:relative;
    margin: 0;
    padding: 0;
}
#items li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
}
#items .itemplaceholder {
    height:200px;
    width:160px;
    text-align: center;
    position: relative;
}
.placeholder {
    width:640px;
    height:200px;
    overflow: hidden;
}
.content {
    width:800px;
    height:240px;
}
#items .itemplaceholder p {
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 50%;
}
#items .itemplaceholder p a {
    position: absolute;
    display: block;
    bottom: 0;
    text-align: center;
    width: 100%;
}

JavaScript

function next() {
    $menu = $('#items');
    $first = $menu.find("li").first();
    unbindClick();


    $first.animate({
        marginLeft: -1 * $first.width()
    }, {
        duration: 600,
        queue: false,
        complete: function() {
            $menu.append($first);
            $first.css('marginLeft', '');
            bindClick();
        }
    });
}

function prev() {
    $menu = $('#items');
    $first = $menu.find("li").first();
    $last = $menu.find("li").last();
    $menu.prepend($last);

    var width = $last.width();
    $last.css('marginLeft', -1 * width + "px");
    $menu.prepend($last);
    unbindClick();

    $last.animate({
        marginLeft: 0
    }, {
        duration: 600,
        queue: false,
        complete: bindClick
    });
}

function unbindClick() {
    $("#next").unbind('click');
    $("#prev").unbind('click');
}

function bindClick() {
    $("#next").click(next);
    $("#prev").click(prev);
}

$("#next").click(next);
$("#prev").click(prev);