@pit6262
Верстальщик

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

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

Ссылка на сайт
Скрин
5dc7048f8605f522508359.png
Код
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,
            });
        });
  • Вопрос задан
  • 222 просмотра
Решения вопроса 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;
        }
        ...
    });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы