Fixing filter bug in slick.js when using center mode.

slick-filter-bug-fix.js

$(document).ready(function() {
 
  // Product slider
  var $sliderFilters = $('.js-products-slider-filter > li');
  var $productsSliderNavigation = $('.js-products-slider-nav');
  var $productsSliderPreview = $('.js-products-slider-preview');

  initSliders();

  function initSliders() {
    $sliderFilters.on('click', onFilterClicked);

    $productsSliderNavigation.slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: $productsSliderPreview,
      dots: false,
      centerMode: true,
      focusOnSelect: true
    });

    $productsSliderPreview.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: $productsSliderNavigation
    });

    var initialFilterTerm = findFilterTerm($sliderFilters.filter('.active'));
    filterSlider(initialFilterTerm);
  }

  function onFilterClicked(event) {
    event.preventDefault();
    var $productSliderFilterListItem = $(this);

    if( $productSliderFilterListItem.hasClass('active') === false ) {
      var filterTerm = findFilterTerm($productSliderFilterListItem);
      filterSlider(filterTerm);
      $sliderFilters.removeClass('active');
      $productSliderFilterListItem.addClass('active');
    }

  }

  function filterSlider(filterTerm) {
    var slideIndex = 0;
    
    $productsSliderNavigation.slick('slickUnfilter');
    $productsSliderNavigation.slick('slickGoTo', 0);
    $productsSliderNavigation.slick('slickFilter', function (index, element) {
      var $element = $(element);
      var result = false;
      if ($element.data('brand') == filterTerm) {
        $element.attr('data-slick-index', slideIndex);
        slideIndex++;
        result = true;
      }
      return result;
    });

    $productsSliderPreview.slick('slickUnfilter');
    $productsSliderPreview.slick('slickGoTo', 0);
    $productsSliderPreview.slick('slickFilter', '[data-brand="' + filterTerm  + '"]');
  }

  function findFilterTerm(element) {
    return element.children('a').data('brand');
  }
});