在导航以及主库中使用光滑的滑块过滤器

Question

我正在尝试使用光滑的幻灯片过滤器选项，并且在导航幻灯片和主幻灯片上也无法使用它。

这是我已经拥有的一个小提琴示例： https://jsfiddle.net/haggotx5/

通过从下拉列表中选择白色来过滤掉白色幻灯片，然后单击4显示的最后一张幻灯片，它现在不同步..所以现在＃5打开＃6幻灯片。我是否错误地使用过滤器？

<div class="slider-for">
  <div class="item red">
    1
  </div>
  <div class="item white">
    2
  </div>
  <div class="item white">
    3
  </div>
  <div class="item white">
    4
  </div>
  <div class="item white">
    5
  </div>
  <div class="item white">
    6
  </div>
</div>
<div class="slider-nav">
  <div class="item red">
    1
  </div>
  <div class="item white">
    2
  </div>
  <div class="item white">
    3
  </div>
  <div class="item white">
    4
  </div>
  <div class="item white">
    5
  </div>
  <div class="item white">
    6
  </div>
</div>

<br>

<select id='color'>
  <option value="">Filter</option>
  <option value="red">Red</option>
  <option value="white">White</option>
</select>

这是我的javascript

$(document).ready(function(){
  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
  $('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    focusOnSelect: true
  });
  $("#color").change(function(){
    color = $(this).val();
    $('.slider-nav').slick("slickUnfilter");
    $('.slider-for').slick("slickUnfilter");
    $('.slider-nav').slick("slickFilter",'.'+color);
    $('.slider-for').slick("slickFilter",'.'+color);
  })
})