初始化滑块时未显示圆滑箭头

Question

我当前正在解决一个问题，当我单击对应于该颜色滑块的相应颜色按钮时，有多个滑块实例需要初始化。有一个主画廊滑块，还有一个缩略图滑块，可作为主画廊的导航。

此刻，我有一个模板字符串中的箭头标记，当滑动滑块并传递颜色和方向作为参数时，该模板字符串将被调用。此外，我取消了当前初始化的与所选颜色不匹配的所有可能的滑块。这是一个Codepen，其中包含一些我为更多上下文而想出的工作。 https://codepen.io/crawbuck/pen/OJLpPNm

const navs = Array.from(document.querySelectorAll('.js-gallery-nav')),
      stages = Array.from(document.querySelectorAll('.js-gallery-stage'));

  let getArrow = (color, direction) => {
    return `<div class="tc-slide-control-wrap js-gallery-${direction}" data-color="${color}" data-direction="${direction}">
        <button role="button" class="tc-btn tc-btn--slide-control tc-btn--trans">
            <svg width="9px" height="16px" viewBox="0 0 9 16">
                <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1548.000000, -365.000000)">
                    <g id="arrow" transform="translate(30.000000, 355.000000)">
                        <path d="M1519.10638,10.1763417 C1518.8472,9.93514411 1518.4433,9.94216076 1518.1929,10.1925678 C1517.94205,10.4429748 1517.93503,10.8468712 1518.17667,11.106049 L1525.19333,18.1227074 L1518.17667,24.8937827 C1517.93503,25.1529606 1517.94205,25.556857 1518.1929,25.807264 C1518.4433,26.057671 1518.8472,26.0651262 1519.10638,25.82349 L1526.92995,18.1227074 L1519.10638,10.1763417 Z" class="tc-btn__arrow"></path>
                    </g>
                </g>
            </svg>
        </button>
    </div>`
}


let initStage = color => {
    stages.filter(stage => stage.getAttribute('data-slider') === color).map(stage => {
        stage.classList.remove('hidden');
        stage.classList.add('block');
        let $nav = $(`.js-gallery-nav[data-slider="${color}"]`);
        $(stage).slick({
            arrows: false,
            dots: true,
            centerMode: true,
            centerPadding: '50px',
            mobileFirst: true,
            slidesToScroll: 1,
            slidesToShow: 1,
            speed: 400,
            rows: 0,
            cssEase: 'ease',
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        centerPadding: '100px'
                    }
                },
                {
                    breakpoint: 1025,
                    settings: {
                        fade: true,
                        dots: false,
                        centerMode: false,
                        asNavFor: $nav
                    }
                }                       
            ]
        });
    })
    stages.filter(stage => stage.getAttribute('data-slider') !== color).map(stage => {
        stage.classList.add('hidden');
        stage.classList.remove('block');        
        if ($(stage).hasClass('slick-initialized')) {
            $(stage).slick('unslick');
        }       
    })      
}

let initNav = color => {
    navs.filter(nav => nav.getAttribute('data-slider') === color).map(nav => {
        nav.classList.remove('hidden');
        nav.classList.add('block');
        let $stage = $(`.js-gallery-stage[data-slider="${color}"]`);
        $(nav).slick({
            focusOnSelect: true,
            mobileFirst: true,
            slidesToShow: 4,
            slidesToScroll: 1,
            cssEase: 'ease',
            infinite: true,
            asNavFor: $stage,
            speed: 400,
            adaptiveHeight: true,
            arrows: true,
            rows: 0,
            nextArrow: getArrow(color, 'next'),
            prevArrow: getArrow(color, 'prev'),
            responsive: [
                {
                    breakpoint: 1025,
                    settings: {
                        vertical: true
                    }
                }
            ]
        });
    })
    navs.filter(nav => nav.getAttribute('data-slider') !== color).map(nav => {
        nav.classList.add('hidden');
        nav.classList.remove('block');
        if ($(nav).hasClass('slick-initialized')) {
            $(nav).slick('unslick');
        }
    })      
}

let init = color => {
    initStage(color);
    initNav(color);
}

目前，滑块的第一个实例正在按预期工作，但是，单击另一种颜色时，箭头未显示。控制台中没有错误。如果有人有任何意见，将不胜感激。谢谢您的宝贵时间。