title: jquery horizontal ul/navbar slider
body: <p>I am working on a regular homepage that has an horizontal navigation bar (twitter bootstrap style).</p>
  
  <p>The problem: based on an input when you enter the site, the page will display a mix of buttons in the navigation bar. It might display 4 buttons, or 20 buttons, depending on that input.</p>
  
  <p>When there are too many buttons(a simple if buttons > x) I want to apply an horizontal slider that will animate/slide by one button when the user clicks on a prev/next button.</p>
  
  <p>So far I have tried bxSlider (www.bxslider.com) and hoverscroll. Hoverscroll was ok, but I needed something click based rather than mouseover. BxSlider only slides by a fixed size on each click, and I want something that slides to an element, rather than pixels.</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;div id="divone"&gt;
    &lt;div id="divtwo"&gt;
      &lt;ul id="my-list"&gt;
        &lt;li&gt;Link&lt;li&gt;
        &lt;li&gt;Link&lt;li&gt;
        &lt;li&gt;Link&lt;li&gt;
        &lt;li&gt;Link&lt;li&gt;
        &lt;li&gt;Link&lt;li&gt;
         etc.
      &lt;ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
              #divone
              {
                  width: 678px;
                  height: 51px;
                  position: relative;
              }
  
              #divtwo
              {
                  width: 678px;
                  height: 51px;
                  overflow: hidden;
              }
  
              #my-list
              {
                  width: 6000px;
              }
  </code></pre>
  
  <p>That's the structure, possibly with another 'overflow:hidden' div parent so I can make a scrollable/sliding area.</p>
  
  <p>I appreciate any help.</p>