JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/14193826/jquery.backgroundPosition.js"></script>
<div id="rocksMenu_btnLeft"></div>
<div id="rocksMenu_btnRight"></div>

      <div id="centerArea">
         <div id="menuContainer">
            <div id="menuItem_1" class="menuItem">
               <div class="content">Contents1</div>
            </div>
            <div id="menuItem_2" class="menuItem">
               <div class="content">Contents2</div>
            </div>
            <div id="menuItem_3" class="menuItem">
               <div class="content">Contents3</div>
            </div>
            <div id="menuItem_4" class="menuItem">
               <div class="content">Contents4</div>
            </div>
         </div>
      </div>

CSS

#rocksMenu_btnLeft, #rocksMenu_btnRight {
  z-index: 1;
  width: 25px; height: 45px;
  margin: auto;
  cursor: pointer;
}

#rocksMenu_btnLeft {
  width: 26px; height: 45px;
  background-image: url(https://dl.dropboxusercontent.com/u/14193826/rocksMenu_btnLeft.png);
  background-repeat: no-repeat; background-position: -52px 0px;
  position: absolute;
}

#rocksMenu_btnRight {
  width: 26px; height: 45px;
  background-image: url(https://dl.dropboxusercontent.com/u/14193826/rocksMenu_btnRight.png);
  background-repeat: no-repeat;
  position: absolute; left: 50px;
}

#centerArea {
    width: 200px; height: 150px;
    position: relative;
    left: 200px;
    clear: both;
    border: 6pt solid gray;
}

#menuContainer{
    width: 200px; height: 150px;
    position: relative; left: 0px
}

.menuItem {
    width: 150px; height: 100px;
    position: absolute; top: 16%;
}

#menuItem_1{ z-index: 0; left: 25px; }
#menuItem_2{ z-index: 1; left: 225px; }
#menuItem_3{ z-index: 2; left: 425px; }
#menuItem_4{ z-index: 3; left: 625px; }

#menuItem_1 .content{ background-color: orange;}
#menuItem_2 .content{ background-color: blue;}
#menuItem_3 .content{ background-color: red;}
#menuItem_4 .content{ background-color: green;}

.menuItem .content {
    color: #fff;
    font: italic 20px/63px georgia;
    height: 64%;
    margin: 10px;
    text-align: center;
}

JavaScript

var menuItem_place = 0;
var menuItem_position = 0;
var menuItem_limit = parseInt($('.menuItem').length) - 1;

$('.menuItem:first .content').css({margin: 0, height: '100%', lineHeight: '99px'})

// Rocks menu scroll LEFT button mouse events ////////////////////////////////////////////////////////////////////////////
$('#rocksMenu_btnLeft').on('mouseenter', function(){
  $(this).animate({'background-position-x':'-26px'}, 150);
});
$('#rocksMenu_btnLeft').on('mouseleave', function(){
  $(this).stop(true).animate({'background-position-x':'-52px'}, 150);
});
$('#rocksMenu_btnLeft').on('click', function(){
  $(this).animate({'background-position-x':'0px'}, 150,
    function(){
      $(this).animate({'background-position-x':'-26px'}, 150);
      // Slide items backward
      if (menuItem_place > 0){
       menuItem_place --;
      }
      menu_animateClick();
    }
  );
});

// Rocks menu scroll RIGHT button mouse events ///////////////////////////////////////////////////////////////////////////
$('#rocksMenu_btnRight').on('mouseenter', function(){
  $(this).animate({'background-position-x':'-26px'}, 150);
});
$('#rocksMenu_btnRight').on('mouseleave', function(){
  $(this).stop(true).animate({'background-position-x':'0px'}, 150);
});
$('#rocksMenu_btnRight').on('click', function(){
  $(this).animate({'background-position-x':'-52px'}, 150,
    function(){
      $(this).animate({'background-position-x':'-26px'}, 150);
      // Slide items forward
      if (menuItem_place < menuItem_limit){
        menuItem_place ++;
      }
      menu_animateClick();
    }
  );
});

function menu_animateClick() {
    menuItem_position = 0 - (menuItem_place * 200);
    $('#menuContainer').stop().animate({left: menuItem_position + 'px'}, 300);
}