.drawer-items{width: auto !important;}
.drawer-items ul {
   margin: 0px;
   padding: 0px;
}
.drawer-items li {
   float: none !important;
   list-style: none;
   margin-left: 0px;
   width: 200px;
   display: table-cell !important;
}

function MoverLista(derecha){
    var ul = $('.drawer-items>ul');
    //para la derecha
    if(derecha)
        ul.children('li:first-child').appendTo(ul);
    else
      ul.children('li:last-child').prependTo(ul);
    //para la izquierda
 }

<div class="drawer-content">
        <div class="drawer-navigation">
            <a class="drawer-left" href="javascript:MoverLista(false)">Izquierda</a>
            <a class="drawer-right"href="javascript:MoverLista(true)">Derecha</a>
        </div>
        <div class="drawer-items">
            <ul>...

.drawer-navigation{
    width: 100%;
    position: relative;
}
.drawer-navigation a{
    position:absolute;
    top:0px;
    height: 140px;
    width:100px;
    display: block;
    color:orange;
    background: rgba(0,0,0,0.3)
}
.drawer-navigation a:hover{
    background: orange;
    color:black;
}
.drawer-navigation a.drawer-left{
    left:0px;
}
.drawer-navigation a.drawer-right{
    right:0px !important;
}