Question

我有这个code here，它显示了我的工作。在各种情况下，我可能要经过大量的div，因此我想在底部导航中显示某种椭圆。假设我有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

    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
}

CSS

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

JS

{{1}}

圆滑的传送带-同步滑块的导航中需要椭圆形

0 个答案: