如何逐个滑动LI作为上一个和下一个使用jquery

Question

我正在尝试将列表项逐个滑动为上一个和下一个。我的例子如下所示

  < Li1 List 2 ulList 3 List 4 Li5 >

点击Next（greaterthanIcon）后，Li1应隐藏

  < List 2 ulList 3 List 4 Li5 List6 >

如果我点击上一个（lesserthanIcon），Li1应该来，而List6应该隐藏。

我的代码是：

HTML：

      <div class="left"><</div>
         <div id="listWrapper">
           <ul>
             <li>Li1</li>
             <li>List 2</li>
             <li>ulList 3</li>
             <li>List 4</li>
             <li>Li5</li>
             <li>List6</li>
             <li>Li7</li>
             <li>List8</li>
           </ul>
         </div>
       <div class="right">></div>

CSS：

       <style type="text/css">
          #listWrapper{
             width:225px;
             overflow:hidden;
            }

             ul{
              white-space: nowrap;
            }
          li{
            display:inline-block;
            }
          .left {
            position: relative;
            top: 34px;
            left: 23px;
            }
         .right {
          position: relative;
          top: -34px;
          left: 230px;
           }
      </style>