Support Forums

Support Forums Forums General Support Filtering with radio not working when using slick JS library on ul element

This topic is: not resolved

This topic contains 9 replies, has 3 voices, and was last updated by  Ross 4 days, 10 hours ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • phi
    #220464

    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();
    });
    
    phi
    #220465
    This reply has been marked as private.
    Trevor Moderator
    #220502

    I presume that, without slick slider, it all works OK?

    phi
    #220536
    This reply has been marked as private.
    Trevor Moderator
    #220541
    This reply has been marked as private.
    Ross Moderator
    #220601
    This reply has been marked as private.
    phi
    #220676
    This reply has been marked as private.
    Ross Moderator
    #220925
    This reply has been marked as private.
    phi
    #221032
    This reply has been marked as private.
    Ross Moderator
    #221074
    This reply has been marked as private.
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.