Bug with filtering on responsive (continued)

[yanike]

Continured from this issue: https://github.com/kenwheeler/slick/issues/1693

I have an issue with breakpoints where the carousel disappears when filtering. Removing the breakpoints makes the slider work fine.

Video: https://youtu.be/zNUxPZmWdFQ

Slick version: "slick-carousel": "^1.8.1",

How I'm using the filter: (CLASSNAME is where my actual class name is and filterClass is a variable containing the return of a class name by a function (e.g. ".rn"))

jQuery('.CLASSNAME__content-slider').slick('slickFilter', function(index, elem) {
    let checker = true;
    if(filterClass){
        checker = jQuery(elem).find(filterClass).length > 0;
    }
    return checker;
});

[mayankagrawal10198]

+1

[yanike]

jQuery Workaround Use jQuery or JavaScript to detect the window size, set a variable based off the window size, and use that variable for "slidesToShow" and/or "slidesToScroll". This will only give a solution for initial load. Of course, don't use responsive breakpoints with this workaround. Still better than nothing until a fix is given :) Might even can get fancy with it and have it refresh the slider base on window change.

let slideCount;

if ($(window).width() > 991) {
  slideCount = 4;
} else if ($(window).width() > 767) {
  slideCount = 3;
} else if ($(window).width() > 480) {
  slideCount = 2;
} else {
  slideCount = 1;
}

$('.theSlider').slick({
    slidesToShow: slideCount,
    slidesToScroll: slideCount
}):

[mayankagrawal10198]

Thanks for the update.

Best regards, Mayank

On Fri, 28 May 2021, 02:14 Yanike Mann, @.***> wrote:

jQuery Workaround Use jQuery or JavaScript to detect the window size, set a variable based off the window size, and use that variable for "slidesToShow" and/or "slidesToScroll". This will only give a solution for initial load. Still better than nothing until a fix is given :) Might even can get fancy with it and have it refresh the slider base on window change.

let slideCount;

if ($(window).width() < 767) { slideCount = 2; } else { slideCount = 4; }

$('.theSlider').slick({ slidesToShow: slideCount, slidesToScroll: slideCount }):

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/kenwheeler/slick/issues/4101#issuecomment-849928778, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIWGYWXUEN5BL6XQ2YB3DODTP2VJPANCNFSM45APP4KQ .

[shilpa11]

@kenwheeler Please provide a solution or a workaround for slickFilter to work with responsive settings.

[mayankagrawal10198]

Hey I am just wondering if we can use slickAdd and slickRemove in place of slickFilter to achieve desired result.

[sagarpandey37]

+1

[ybla82]

I've fixed the bug. In slickFilter function you have to clone the collection .$slides, insted of to simply assign to .$slidesCache. Then, few lines below, when you apply the filter, you have to apply again the clone function.

In general, it's good to apply the clone everywhere .$slides is assigned to .$slidesCache (function Unfilter, AddSlide, RemoveSlide). The main point is that _.$slidesCache has to be protected and not changed if not directly.

With this solution, all work fine. Pay attention: use clone(true,true) and not only clone()

_.$slidesCache = _.$slides.clone(true, true);
var slideToFilter = _.$slides.clone(true, true);
...
$(slideToFilter).filter(filter).appendTo(_.$slideTrack);

[shereewalker]

Hi @ybla82

I can't seem to get this to work. Do you think you could help me with your fix? I would be very grateful.

This is what I have `var filtered = false;

    $(document).ready(function () {
      let filtered = false;

      // Function to apply filtering based on screen width
      function applyFilters() {
        const screenWidth = window.innerWidth;

        if (screenWidth > 768) {
          if (filtered) {
            $('.pm-slider').slick('slickUnfilter');
            filtered = false;
          }
        } else {
          if (!filtered) {
            $('.pm-slider').slick('slickFilter', $('.desktop-content-pm').parent().parent());
            filtered = true;     
          }
        }
      }

      // Initial check and on resize
      applyFilters();

      $(window).resize(function () {
        applyFilters();
      });

    });`

It works but not on window resize, only on page load

Thanks