vladislav_boychenko
@vladislav_boychenko
Купаюсь в гривнах

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

Добрый вечер!
Сабж: 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', )

Но это не работает. Может кто-то реализовывал подобное с множеством слайдеров?
Спасибо!
  • Вопрос задан
  • 5620 просмотров
Решения вопроса 1
vladislav_boychenko
@vladislav_boychenko Автор вопроса
Купаюсь в гривнах
Пришел к решению в другом проекте. Если у вас несколько одинаковых слайдеров, нужно просто вызывать их через each(), и тогда соответственно обращаться к нужным элементам через $(this), примерно так:
$('.portfolio-slider-big').each(function(){
  $(this).slick({
    asNavFor: $(this).parents('.postfolio-slider-container').find('.portfolio-slider-little');
  });
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@vaajnur
битриксоид
api.jquery.com/eq-selector
asNavFor: '.portfolio-slider-little:eq(0)'
asNavFor: '.portfolio-slider-big:eq(0)'
Ответ написан
Комментировать
Зачем так сложно?
Можно же проще.
let sliderBig = $('.portfolio-slider-big'),
    sliderLittle = $('.portfolio-slider-little');

sliderBig.slick(
    {
        asNavFor: sliderLittle
    }
);

sliderLittle.slick(
    {
        asNavFor: sliderBig
    }
);

а если контекст селектору задать -- ещё удобнее.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 17:14
4000 руб./за проект
29 мар. 2024, в 17:04
5000 руб./за проект
29 мар. 2024, в 17:03
3000 руб./за проект