Slick carousel - нужны эллипсы в навигации по синхронизированному слайдеру

Question

У меня есть код здесь , который показывает, над чем я работаю. В разных случаях мне нужно пройти через большое количество делений, поэтому я хочу показать некоторые эллипсы в нижней части навигации. Допустим, у меня есть 16 слайдов. Так что я хочу, чтобы навигация показывала

1 2 3 4 5 6 7 8 ... 16

... 3 4 5 6 7 8 9 10 11 ... 16

Полагаю, части эллипсов "..." и "... 16" должны представлять собой свои отдельные элементы div, расположенные по бокам самого слайдера. Я не могу добавить их правильно. Конечно, эллипсы div следует видеть только в том случае, если пользователь не находится в первом div. «... 16» следует видеть, пока они не достигнут последнего деления.

Это всего лишь пример. Пока он правильно помещается под верхним слайдером. Пожалуйста, помогите.

HTML

<div class="row">
        <div class="slider slider-single">
                <div><h3>1</h3></div>
                <div><h3>2</h3></div>
                <div><h3>3</h3></div>
                <div><h3>4</h3></div>
                <div><h3>5</h3></div>
                <div><h3>6</h3></div>
                <div><h3>7</h3></div>
                <div><h3>8</h3></div>
                <div><h3>9</h3></div>
                <div><h3>10</h3></div>
            <div><h3>11</h3></div>
            <div><h3>12</h3></div>
            <div><h3>13</h3></div>
            <div><h3>14</h3></div>
            <div><h3>15</h3></div>
            <div><h3>16</h3></div>
            </div>
        <div class="ellipses"><span>...</span></div>
            <div class="slider slider-nav">
                <div><h3><span>1</span></h3></div>
                <div><h3><span>2</span></h3></div>
                <div><h3><span>3</span></h3></div>
                <div><h3><span>4</span></h3></div>
                <div><h3><span>5</span></h3></div>
                <div><h3><span>6</span></h3></div>
                <div><h3><span>7</span></h3></div>
                <div><h3><span>8</span></h3></div>
                <div><h3><span>9</span></h3></div>
                <div><h3><span>10</span></h3></div>
                <div><h3><span>11</span></h3></div>
                <div><h3><span>12</span></h3></div>
                <div><h3><span>13</span></h3></div>
                <div><h3><span>14</span></h3></div>
                <div><h3><span>15</span></h3></div>
                <div><h3><span>16</span></h3></div>

            </div>
        <div class="ellipses2"><span>...16</span></div>
    </div>

CSS

    h3, .ellipses, .ellipses2 {
    background: #f0f0f0;
    color: #3498db;
    font-size: 2.25rem;
    margin: .5rem;
    padding: 2%;
    position: relative;
    text-align: center;
}

.slider-single h3 {
    line-height: 10rem;
}

.slider-nav h3::before{
    content: "";
    display: inline-block;
    padding-top: 75%;
}

.slider-nav h3 span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ellipses span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider-nav .slick-slide { cursor: pointer; }

.slick-slide.is-active h3 {
    color: #c00;
    background-color: #fff
}

JS

 $('.slider-single').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: false,
    adaptiveHeight: true,
    infinite: false,
    useTransform: true,
    speed: 400,
    cssEase: 'cubic-bezier(0.77, 0, 0.18, 1)',
 });

 $('.slider-nav')
    .on('init', function(event, slick) {
        $('.slider-nav .slick-slide.slick-current').addClass('is-active');
    })
    .slick({
        slidesToShow: 10,
        slidesToScroll: 1,
     arrows: false,
        dots: false,
     swipe: false,
        focusOnSelect: false,
        infinite: false,
        responsive: [{
            breakpoint: 1024,
            settings: {
                slidesToShow: 5,
                slidesToScroll: 5,
            }
        }, {
            breakpoint: 640,
            settings: {
                slidesToShow: 4,
                slidesToScroll: 4,
            }
        }, {
            breakpoint: 420,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
        }
        }]
    });

 $('.slider-single').on('afterChange', function(event, slick, currentSlide) {
    $('.slider-nav').slick('slickGoTo', currentSlide);
    var currrentNavSlideElem = '.slider-nav .slick-slide[data-slick-index="' + currentSlide + '"]';
    $('.slider-nav .slick-slide.is-active').removeClass('is-active');
    $(currrentNavSlideElem).addClass('is-active');
 });