JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
    <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</p>
                    
                    <a href="#">Link</a>
                </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</p>
                    <a href="#">Link</a>
                    </span>
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <img src="http://ce.byu.edu/cw/testprep/images/testDrive.jpg"/>
                    <p>Title 3<br/>
                    Lorem ipsum</p>
                    <a href="#">Link</a>
                    
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/>
                    <p>Title<br/>
                    Text</p>
                    <a href="#">Link</a>
                    
                    
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    <img src="http://ce.byu.edu/cw/testprep/images/testDrive.jpg"/>
                    <p>Title title title<br/>
                    Lorem ipsum</p>
                    <a href="#">Link</a>
                    
                </div>
            </li>
            <li>
                <div class="itemplaceholder">
                    Item F
                </div>
            </li>
       ...

CSS

#items{
              display: inline;
          }
          
          ul{
              position:relative;
          }
          li{
              float: left;
              list-style-type: none;

          }
          
          .itemplaceholder{
              height:200px;
              width:160px;
              text-align:center;
          }
          
          .placeholder{
              width:640px;
              height:200px;
              overflow: hidden;
          }
          
          .content{
              width:800px;
              height:240px;
          }
          

          
          .itemplaceholder  img
          {
              margin-top:5px;
              
          }
          
          .itemplaceholder a
          {
              bottom: 0px;
              
          }

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);