How to slide one by one LI's as prev and next using jquery

Question

I am trying to slide list items as previous and next one by one. My example will look like below

  < Li1 List 2 ulList 3 List 4 Li5 >

After click on Next(greaterthanIcon) Li1 should be hide then

  < List 2 ulList 3 List 4 Li5 List6 >

If I click on previous(lesserthanIcon) Li1 should come and List6 should hide.

my code is:

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>