Hi,

I am using Ajax filtering with taxonomy as radio buttons and Slick slider (https://kenwheeler.github.io/slick/) to support better horizontal scrolling on mobile devices.

The problem is that when selecting item, right group of items is not shown. i think slick and ajax request go into conflict.
Also when item is selected, slick stops working and reinitiating it after ajax event is completed does not work.

I found a similar problem here: https://support.searchandfilter.com/forums/topic/ajax-messing-up-slick-js-script/page/2/
Unfortunately solution there does not work for us.

JS:

$.fn.slicknav = function() {
  $('.product-categories form > ul > li > ul').slick({
    slidesToShow: 5,
    centerMode: false,
    arrows: false,
    dots: false,
    infinite: false,
    variableWidth: true,
    initialSlide: 1,
    responsive: [
      {
        breakpoint: 1025,
        settings: {
          dots: false,
          arrows: false,
          slidesToShow: 3,
          centerMode: false,
          centerPadding: '0',
        }
      },
      {
        breakpoint: 640,
        settings: {
          dots: false,
          arrows: false,
          slidesToShow: 1,
          centerMode: true,
          centerPadding: '0',
        }
      }
    ]
  });
};
$(document).ready(function($){
  $('.product-categories form > ul > li > ul').slicknav();
});
$(document).on('sf:init, sf:ajaxfinish', '.searchandfilter', function(){
  $('.product-categories form > ul > li > ul').slicknav();
});