Несколько slick slider на странице, как задать условие без клонирования классов?

Question

[Евгений]

Есть несколько слайдеров с одинаковыми классами.
Есть условие, что при наличие более 4 слайдов, слайдер активируется. Он активируется, но сразу везде. Я понимаю, что он ищет класс всех слайдеров и активирует его, но не могу придумать как обратится именно к этому слайдеру, в котором сейчас 4 слайда, а другие не трогать, пока в них тоже не будет 4 слайда.

<div class="snacks__list">
                <a class="snacks__list__item" href="">
                </a>
                <a class="snacks__list__item" href="">
                </a>
                <a class="snacks__list__item" href="">
                </a>
</div>

$(document).ready(function(){
    var snacks = $('.snacks__list__item');
    var slider = $('.snacks__list');
    
     const lists = (list) => {
        for(var i = 0; list.length > 0; i++) {
            if(list.length > 4) {

                slider.slick({
                    infinite: true,
                    slidesToShow: 4,
                    slidesToScroll: 1
                 });
            }
        }
     }

    lists(snacks);
  });

Comments

[Lord_Dantes]

Добавить класс к этому элементу и присвоить ему переменную после чего делать действие с переменной пробовали или вы так не хотите?

Answer 1

[Pashok Doom]

$('.snacks__list').each(function(i, e){
    if ($(e).find('.snacks__list__item').length > 4) {
		$(e).slick({
			infinite: true,
			slidesToShow: 4,
			slidesToScroll: 1
		 });
	}
})

Попробуй как-то так

Comments

[Евгений]

Спасибо большое.