Horizontal scrolling UL with buttons and "width:auto" lists
<p>As the title suggests, I am trying to create a horizontal scrollable <code>&lt;ul&gt;</code> with <code>&lt;li&gt;</code> with <code>width:auto</code> and with prev and next buttons, clearly with <code>overflow:hidden</code>.
Any suggestions on how to manage it with jquery?
This is the code that I have prepared...</p>

<p><a href="https://jsfiddle.net/a39wxo69/4/" rel="nofollow noreferrer">JSFiddle</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="wrapper"&gt;
  &lt;span class="arrow"&gt;&amp;lt;&lt;/span&gt;
  &lt;span class="arrow"&gt;&amp;gt;&lt;/span&gt;
  &lt;ul id="nav"&gt;
    &lt;li&gt;Abbaiare&lt;/li&gt;
    &lt;li&gt;Bolle&lt;/li&gt;
    &lt;li&gt;Cantante&lt;/li&gt;
    &lt;li&gt;Domodossola&lt;/li&gt;
    &lt;li&gt;Elefante&lt;/li&gt;
    &lt;li&gt;Giovanni&lt;/li&gt;
    &lt;li&gt;Hotel&lt;/li&gt;
    &lt;li&gt;Inti&lt;/li&gt;
    &lt;li&gt;Montagna&lt;/li&gt;
    &lt;li&gt;Nave&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>* {
  margin:0;
  padding:0;
}
#wrapper {
  width:calc(100% - 120px);
  height:60px;
  background-color:#dbdbdb;
  padding:0 60px;
  margin-top:60px;
  font-family:helvetica;
  overflow:hidden;
  position:relative;
  z-index:99; 
}
.arrow {
  display:block;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  background-color:#cccccc;
  font-weight:bold;
  cursor:pointer;
  position:absolute;
  top:0;
  z-index:101;
}
.arrow:first-of-type {
  left:0;
}
.arrow:nth-of-type(2) {
  right:0; 
}
#nav {
  width:auto;
  height:60px;
  overflow:hidden;
  list-style-type:none;
  white-space:nowrap;
  transition:2.0s;
}
#nav li {
  display:inline-block;
  height:60px;
  line-height:60px;
  font-size:13px;
  padding:0 30px;
}
</code></pre>