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();
});
.
