jQuery UI Slider - stop at certain points and show hidden item
<p>I am attempting to build out a navigation slider, and am at a loss. What I really need is a slider that stops at specific points, and shows a hidden item based on the point it stops at.</p>

<p>I have built out a very simple example of what I mean in <a href="https://jsfiddle.net/a4abfep8/35/" rel="nofollow">this fiddle</a>.</p>

<pre><code>&lt;div id="slider-wrapper"&gt;
  &lt;ul&gt;
    &lt;li class="first"&gt;Slide 1&lt;/li&gt;
    &lt;li class="second"&gt;Slide 2&lt;/li&gt;
    &lt;li class="third"&gt;Slide 3&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt; 
&lt;div id="slider-nav"&gt;
  &lt;ul&gt;
    &lt;li&gt;Nav 1&lt;/li&gt;
    &lt;li&gt;Nav 2&lt;/li&gt;
    &lt;li&gt;Nav 3&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="slider"&gt;&lt;/div&gt;
&lt;/div&gt; 
</code></pre>

<p>So what needs to happen is the first "Slide" is shown by default, but when you slide the bar and it reaches "Nav 2" on the bar above (so essentially every 100px would be fine) than "Slide 1" would be hidden and "Slide 2" would appear. This functionality needs to work in reverse as well. </p>

<p>I haven't been able to find anything that really functions like what I need. Any recommendations would be much appreciated. </p>