@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,
            });
        });
  • Вопрос задан
  • 105 просмотров
Решения вопроса 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;
        }
        ...
    });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
NetLab Москва
от 35 000 до 50 000 руб.
НТЦ РОСТ Москва
от 150 000 до 250 000 руб.
22 нояб. 2019, в 18:27
2000 руб./за проект
22 нояб. 2019, в 17:16
200 руб./за проект
22 нояб. 2019, в 17:09
6000 руб./за проект