Odtnhj

I am dynamically loading slick carousels into a page. I do not know the total slides available to each carousel. Hard coding it works fine, however, I would like it to dynamically change the "slidesToShow" setting to be at most 3. If it is 2 or 1 however, I would like it to return 1.

I am successfully using a loop to get each slider like so:

$(".carousel").each(function(index)
 //set each carousel/slider
 $(this).slick()....
)

I am able to get the total slides for each slider with init:

$(this).on("init", function(event, slick)
 slidetoshowscroll = parseInt(slick.slideCount);
 if(slidetoshowscroll > 3)
 slidetoshowscroll = 3;
 
 if(slidetoshowscroll < 3)
 slidetoshowscroll = 1;
 
//shows the correct slide #s
 console.log(slidetoshowscroll);

 )

This gives me 3,1,3 etc... as the sliders are initiated.

However, I am not able to set the dynamic "slidetoshowscroll" variable on the slider itself:

$(this).slick(
 autoplay: false,
 arrows: true,
 infinite: false,
 speed: 300,
 slidesToShow: slidetoshowscroll,
 slidesToScroll: 1
);

How can I dynamically let "slick" know how many slides I have to show for each slideshow?

I would suggest calculating the initial children count upfront before creating the slick carousel, so that the slidesToShow option is set correctly right from the start, like so:

$(".carousel").each(function(index)
 var childrenCount = this.childElementCount;
 var slidetoshowscroll;
 if(slidetoshowscroll > 3)
 slidetoshowscroll = 3;
 
 if(slidetoshowscroll < 3)
 slidetoshowscroll = 1;
 
 $(this).slick(
 ...
 slidesToShow: slidetoshowscroll,
 )....
)

But if you insist on creating the carousel with default options, but you want to base your later calculations on slick.slideCount (which might, for some reason, be different than childElementCount), then you can modify the slick option using slickSetOption, like so:

$(this).on("init", function(event, slick)
 slidetoshowscroll = parseInt(slick.slideCount);
 if(slidetoshowscroll > 3)
 slidetoshowscroll = 3;
 
 if(slidetoshowscroll < 3)
 slidetoshowscroll = 1;
 
 slick.slick("slickSetOption", "slidesToShow", slidetoshowscroll, true);
)