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

[Akio333]

You can use slickSetOption inside resize event to change options based on breakpoint. e. g.

$(window).on('resize', function () {
    if(window.innerWidth < 768) {
        $('.slider-selector').slick('slickSetOption', { slidesToShow: 1})
    } else {
        $('.slider-selector').slick('slickSetOption', { slidesToShow: 2})
    }
}

This also prevents re initialization of slider.