Как в slick slider заставить AsNavFor работать с ближайшим слайдером, а не всеми?

Question

[Владислав Бойченко]

Добрый вечер!
Сабж: dev.boichenko.space/remont
Прокрутите в самый низ, там секция "выполненные работы" и у каждой работы по слайдеру. Реализовал с помощью двух слайдеров slick, взаимозависимых друг от друга:

$('.portfolio-slider-big').slick({
		arrows: false, 
		asNavFor: '.portfolio-slider-little'
	});
	$('.portfolio-slider-little').slick({
		prevArrow: "<span class='slick-prev'><i class='fas fa-angle-left'></i></span>", 
		nextArrow: "<span class='slick-next'><i class='fas fa-angle-right'></i></span>",
		asNavFor: '.portfolio-slider-big', 
		slidesToShow: 3, 
		focusOnSelect: true
	});

Но суть в том, что в двух проектах у слайдеров то одни и те же классы, и если я кручу картинки в первом, то и во втором картинки крутятся. Можно ли как-то сделать, чтобы крутился только нужный?
Пытался так:

asNavFor: $(this).parent().find('.portfolio-slider-big', )

Но это не работает. Может кто-то реализовывал подобное с множеством слайдеров?
Спасибо!

Answer 1

[Владислав Бойченко]

Пришел к решению в другом проекте. Если у вас несколько одинаковых слайдеров, нужно просто вызывать их через each(), и тогда соответственно обращаться к нужным элементам через $(this), примерно так:

$('.portfolio-slider-big').each(function(){
  $(this).slick({
    asNavFor: $(this).parents('.postfolio-slider-container').find('.portfolio-slider-little');
  });
});

Comments

[Sudeychenko_aleks]

Только тут опечатка

asNavFor: $(this).parents('.postfolio-slider-container').find('.portfolio-slider-little');

Нужно удалить ";" в конце строки

Answer 2

[Айнур Валиев]

api.jquery.com/eq-selector

asNavFor: '.portfolio-slider-little:eq(0)'
asNavFor: '.portfolio-slider-big:eq(0)'

Answer 3

[Илья Петровский]

Зачем так сложно?
Можно же проще.

let sliderBig = $('.portfolio-slider-big'),
    sliderLittle = $('.portfolio-slider-little');

sliderBig.slick(
    {
        asNavFor: sliderLittle
    }
);

sliderLittle.slick(
    {
        asNavFor: sliderBig
    }
);

а если контекст селектору задать -- ещё удобнее.