title: Slide a ul li list with controls horizontaly with jquery
body: <p>Sorry if this was posted before, I'm looking for a script that scrolls an ul list horizontally with controls, most examples get ruined because li itens should have the same fixed width while texts are in different lenghts.</p>
  
  <pre><code>&lt;div id="slidelist"&gt;
  &lt;span class="nav-prev"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/span&gt;
  &lt;div class="listarea"&gt;
  &lt;ul id="submen"&gt;
  &lt;li&gt;Home&lt;/li&gt;
  ....
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;span class="nav-next"&gt;&lt;a href="#"&gt;&amp;raquo;&lt;/a&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#slidelist #submen ul  {display:block; height:20px; position:absolute}
  
  #slidelist #submen ul li {display:inline; border:none; margin-right:20px}
  
  #slidelist .listarea {width:90%;float:left;}
  
  #slidelist .nav-prev {float:left;width:20px;}
  #slidelist .nav-next {float:right;width:20px;}
  </code></pre>
  
  <p>Clicking the prev an next scroll or slide the list inside the div.</p>
  
  <p><img src="https://i.stack.imgur.com/foRbH.png" alt="menu with slider"></p>