Multiple slick slider on page, how to set condition without class cloning?

Question

JavaScript

There are several sliders with the same classes.
There is a condition that if there are more than 4 slides, the slider is activated. It is activated, but immediately everywhere. I understand that it looks for the class of all sliders and activates it, but I can’t figure out how to address this particular slider, which now has 4 slides, and do not touch the others until they also have 4 slides.

<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);
  });

Answer 1

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

Try something like this