Cycle through list using buttons/arrow images HTML and Jquery

Hi I am making a game server that uses html for menus. I have been struggling on how to do this for a few days. Basically I have a list that I want to be used kind of like a range slider but I want there to be buttons on the left and right of it that will scroll through the list only showing one item at a time. Here is a generic version on the code I would be using for the html.

<div class="input">
            <div class="label">Item1</div>
            <div class="value" data-legend="/1"></div>
            <div class="type-range">
              <a href="#" class="arrow arrow-left">&nbsp;</a>
              <input value="1" type="range" class="type1" min="0" max="1">
              <a href="#" class="arrow arrow-right">&nbsp;</a>
            </div>
          </div>

I want it to basically have arrow images on both sides and the list items in the middle like this…

<- Item1 ->

When you click to the left it gets the next ul value

<- Item2 ->

I know how to do the CSS and a lot of the other stuff but I am struggling with the scrolling through the UL list pretty much. Thanks.