Css 光滑的旋转木马-在同步滑块的导航中需要椭圆

我有这个可以显示我正在做什么。 在各种情况下，我可能会有大量的div要通过，所以我想在底部导航中显示某种椭圆。 假设我有16张幻灯片。所以我想让导航显示的是

12345678…16

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

我猜椭圆部分“…”和“…16”应该是它自己独立的div，位于滑块本身的两侧。我似乎无法正确地添加它们。当然，只有当用户不在第一个div上时，才应该看到省略号div。在到达最后一个div之前，应该看到“…16”

这只是一个例子。只要它在顶部滑块下合适。 请帮忙

HTML

JS

---

这里仍然得不到任何帮助…这里仍然得不到任何帮助。。。

<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>

    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
}

 $('.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');
 });