title: Hide Active Slide in `asNavFor` slider in Slick Slider
body: <h1>Question</h1>
  
  <p>Is there a way to hide the currently-active slide from a slider in Slick Slider?</p>
  
  <h2>Motivation</h2>
  
  <p>I am building a Featured Posts slider. One post will be featured prominently, while the remaining posts will feature as previews in a column on the side. A total of 5 posts will be shown at a time.</p>
  
  <p>This is pretty easy to do with <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick Slider</a> (1.9.0) but it has one issue: the "remaining posts" section should <em>only</em> show the remaining posts and not the current post. So when a post is selected it should scroll out of view in the slider, and the featured post slider will change to use the slide at the same index.</p>
  
  <h2>Description of the Action</h2>
  
  <p>Basically, the initial state should be: </p>
  
  <p>Featured Slider: Slide 1 is visible, all others are hidden.
  Remaining Slider: Slide 1 is hidden, Slides 2-5 are visible.</p>
  
  <p>If I click on slide 2 from the Remaining Slider:</p>
  
  <p>Featured Slider: Slide 2 is visible, all others are hidden.
  Remaining Slider: Slide 2 slides out of view, Slide 3 becomes the new top post followed by (in order) 4, 5, 1.</p>
  
  <h2>JS Fiddle</h2>
  
  <p>Here's the JS Fiddle I'm working on: <a href="https://jsfiddle.net/zak_rhm/Lks61ah7/71/" rel="nofollow noreferrer">https://jsfiddle.net/zak_rhm/Lks61ah7/71/</a></p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div id="Large_Slider"&gt;
      &lt;!-- Should only show one slide at a time. --&gt;
      &lt;article class="slide"&gt;
          &lt;h2&gt;Slide 1&lt;/h2&gt;
      &lt;/article&gt;
      &lt;article class="slide"&gt;
          &lt;h2&gt;Slide 2&lt;/h2&gt;
      &lt;/article&gt;
      &lt;article class="slide"&gt;
          &lt;h2&gt;Slide 3&lt;/h2&gt;
      &lt;/article&gt;
      &lt;article class="slide"&gt;
          &lt;h2&gt;Slide 4&lt;/h2&gt;
      &lt;/article&gt;
      &lt;article class="slide"&gt;
          &lt;h2&gt;Slide 5&lt;/h2&gt;
      &lt;/article&gt;
  &lt;/div&gt;
  &lt;ul id="Small_Slider"&gt;
      &lt;!-- Should only show four slides at a time, never show the slide in #Large_Slider --&gt;
      &lt;li id="slide"&gt;Slide 1&lt;/li&gt;
      &lt;li id="slide"&gt;Slide 2&lt;/li&gt;
      &lt;li id="slide"&gt;Slide 3&lt;/li&gt;
      &lt;li id="slide"&gt;Slide 4&lt;/li&gt;
      &lt;li id="slide"&gt;Slide 5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h3>JavaScript (jQuery)</h3>
  
  <pre><code>var $slider_lg = $("#Large_Slider")
  var $slider_sm = $("#Small_Slider")
  
  $slider_lg.slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    asNavFor: '#Small_Slider',
    dots: true,
    fade: true
  });
  
  $slider_sm.slick({
    arrows: false,
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '#Large_Slider',
    focusOnSelect: true,
    vertical: true,
    verticalSwiping: true
  });
  </code></pre>