Слайдер slick внутри слайдера, как сделать так чтобы нумерация слайда не переключалась если свайпишь внутренний слайдер?

Question

[Pit]

Если слайдер slick, внутри него еще один слайдер slick, у главного слайдера есть нумерация слайдов. Проблема в том что при свайпе внутреннего сладера, то нумерация главного слайдера меняется. А мне нужно чтобы нумерация мнялась только от переключения главного слайдера

Ссылка на сайт
Скрин

Код

var $examplesSlider2 = $('.reviews-slider');
    var examplesSlider2 = $examplesSlider2[0];
    var $paging2 = $('.reviews-slider-paging .paging');


    $examplesSlider2.slick({
        slidesToShow: 1,
        adaptiveHeight: true,
        swipe: true,  
        appendArrows: '.reviews-slider-paging',
        prevArrow: '<button class="slick-arrow slick-prev"><img src="img/arrow.svg" alt="" /></button>',
        nextArrow: '<button class="slick-arrow slick-next"><img src="img/arrow.svg" alt="" /></button>',
    });
       
    $examplesSlider2.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
        
        var i = (currentSlide ? currentSlide : 0) + 1;
        if(i > 9) {
            $paging2.html(i + '<span class="slick-devider"></span>' + '<span class="sr">' + slick.slideCount + '</span>');
        } else {
            $paging2.html('0'+i + '<span class="slick-devider"></span>' + '<span class="sr">' + slick.slideCount + '</span>');
        }
        
    });


    $('.reviews-gallery-slider').on('mousedown touchmove', function(){
        examplesSlider2.slick.setOption({
            swipe: false,
            touchMove: false,
        });
    });


    $('.reviews-gallery-slider').slick({
            slidesToShow: 3,
            adaptiveHeight: true,
            infinite: false,
            swipe: true,
            prevArrow: '<button class="slick-arrow slick-prev"><img src="img/arrow.svg" alt="" /></button>',
            nextArrow: '<button class="slick-arrow slick-next"><img src="img/arrow.svg" alt="" /></button>',
        }).on('afterChange', function(event, slick){
            examplesSlider2.slick.setOption({
                swipe: true,
                touchMove: true,
            });
        });

Answer 1

[akyl-kb]

И так у тебя 2-й слайд вложен в 1-й слайд оба подписаны на событие afterChange
В JS события работают по принципу всплытия (снизу в верх), т.е когда во 2-м слайде (reviews-gallery-slider) срабатывает событие afterChange оно дальше передается в вверх 1-му слайду (reviews-slider) так как первый слайд подписан на события init reInit afterChange счетчик изменяется

Причину выяснили, варианты решения:

1. Вариант: во 2-м слайде запретить передачу события afterChange дальше

$('.reviews-gallery-slider').slick(
           ...
        ).on('afterChange', function(event, slick){
            event.stopPropagation(); // <-
            ...
        });

2-й вариант: не самый элегантный но рабочий, для 1-го слайда проверяем что у текущего слайда есть класс reviews-slider, если нет завершаем функцию

$examplesSlider2.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
        // check
        if (!event.target.classList.value.includes('reviews-slider')) {
            return;
        }
        ...
    });

Comments

[Pit]

Работает, но проблема не полностью решилась, получается количество слайдов должно быть 2, а пишет 4, то есть пишет количество слайдов внутреннего слайдера, а нужно внешнего. Не поможете? Буду очень благодарен.

[akyl-kb]

Pit, используй 2-й вариант

[Pit]

akyl-kb, Сделал вот так, но тогда у меня наумерцая страниц добавляется на страницу только при сменен слайда а не при загрузки страницы.

$examplesSlider2.slick({
        slidesToShow: 1,
        adaptiveHeight: true,
        swipe: true, 
        infinite: false, 
        appendArrows: '.reviews-slider-paging',
        prevArrow: '<button class="slick-arrow slick-prev"><img src="img/arrow.svg" alt="" /></button>',
        nextArrow: '<button class="slick-arrow slick-next"><img src="img/arrow.svg" alt="" /></button>',
    }).on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
        if (!event.target.classList.value.includes('reviews-slider')) {
            return;
        }
        var i = (currentSlide ? currentSlide : 0) + 1;
        if(i > 9) {
            $paging2.html(i + '<span class="slick-devider"></span>' + '<span class="sr">' + slick.slideCount + '</span>');
        } else {
            $paging2.html('0'+i + '<span class="slick-devider"></span>' + '<span class="sr">' + slick.slideCount + '</span>');
        }
        
    });

[Pit]

akyl-kb, Ну как вы смотрели код? не знаете в чем может быть проблема? это единственное что осталось поправить в проекте, нужно срочно сдавать а я не знаю что тут можно придумать.
Еще раз кидаю ссылку на страницу ссылка посмотрите пожалуйста, для вас может это 5 минут а для меня вообще вечность и в инете нету решений.

[akyl-kb]

Pit, Если нумерация появляется после события то нужно просто вызвать это событие

var $_slider = $('.reviews-slider')
$_slider.trigger('afterChange', $_slider.get(0).slick, 0, 1);

[Pit]

akyl-kb, Спасибо я уже разобрался, оказывается надо было до запуска слайдера указывать afterChange и делать нумерацию, по вашему коду

if (!event.target.classList.value.includes('reviews-slider')) {
            return;
        }

Я поправил данный код потому что ios выбивал ошибку и js не работал, я сделал вот так

if (!event.target.classList.contains('reviews-slider')) {
            return;
        }

[egowka]

Большое спасибо!)