如何创建带有进度条的 Slick 滑块，就像这样 http://www.apple.com/

Question

I need a slider with timer pagination on dots, like http://www.apple.com . I used slick.js . Instead of dots, I need to make a progress bar.

How can I replace pagination buttons with progress bars?

 $(document).ready(function () { $('.slider').slick({ infinite: true, autoplay:true, dots: true, arrows: false, autoplaySpeed: 3000, slidesToShow: 1, slidesToScroll: 1 }); });

 .slider .slick-dots { padding: 0; } .slider .slick-dots li { position: relative; display: inline-block; width: 19%; height: 15px; margin: 0 2px 0 0; padding: 0; cursor: pointer; background: #ccbdb6; transition: width 5s ease-out 0s; } .slider .slick-dots li:last-child { margin-right: 0; } .slider .slick-dots li:hover, .slider .slick-dots li.slick-active { background: #a08a7f; } .slider .slick-dots li button { display: none !important; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> <div class="slider"> <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> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

Answer 1

Just had to do this for my company yesterday. It was a bit trickier because slick is implemented on our website with 2 transitions : swipe if we use the mouse, fade if we don't..

Anyway, I remembered your post when i was digging a bit yesterday so I made it simpler here.

 $(".slider").slick({ infinite: true, arrows: false, dots: false, autoplay: false, speed: 800, slidesToShow: 1, slidesToScroll: 1, }); //ticking machine var percentTime; var tick; var time = 1; var progressBarIndex = 0; $('.progressBarContainer .progressBar').each(function(index) { var progress = "<div class='inProgress inProgress" + index + "'></div>"; $(this).html(progress); }); function startProgressbar() { resetProgressbar(); percentTime = 0; tick = setInterval(interval, 10); } function interval() { if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true") { progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex"); startProgressbar(); } else { percentTime += 1 / (time + 5); $('.inProgress' + progressBarIndex).css({ width: percentTime + "%" }); if (percentTime >= 100) { $('.single-item').slick('slickNext'); progressBarIndex++; if (progressBarIndex > 2) { progressBarIndex = 0; } startProgressbar(); } } } function resetProgressbar() { $('.inProgress').css({ width: 0 + '%' }); clearInterval(tick); } startProgressbar(); // End ticking machine $('.progressBarContainer div').click(function () { clearInterval(tick); var goToThisIndex = $(this).find("span").data("slickIndex"); $('.single-item').slick('slickGoTo', goToThisIndex, false); startProgressbar(); });

 h3 { margin:5px 0; } .sliderContainer { position: relative; } .slider { width: 500px; margin: 30px 50px 50px; } .slick-slide { background: #3a8999; color: white; padding: 80px 0 120px; font-size: 30px; font-family: "Arial", "Helvetica"; text-align: center; } .slick-prev:before, .slick-next:before { color: black; } .slick-dots { bottom: -30px; } .slick-slide:nth-child(odd) { background: #e84a69; } .progressBarContainer { position: absolute; bottom: 20px; width:300px; left:150px; } .progressBarContainer div { display: block; width: 30%; padding: 0; cursor: pointer; margin-right: 5%; float: left; color: white; } .progressBarContainer div:last-child { margin-right: 0; } .progressBarContainer div span.progressBar { width: 100%; height: 4px; background-color: rgba(255, 255, 255, 0.4); display: block; } .progressBarContainer div span.progressBar .inProgress { background-color: rgba(255, 255, 255, 1); width: 0%; height: 4px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> <script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script> <link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/> <link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/> <div class="sliderContainer"> <div class="slider single-item"> <div>Slide1</div> <div>Slide2</div> <div>Slide3</div> </div> <div class="progressBarContainer"> <div> <h3>Slide 1</h3> <span data-slick-index="0" class="progressBar"></span> </div> <div> <h3>Slide 2</h3> <span data-slick-index="1" class="progressBar"></span> </div> <div> <h3>Slide 3</h3> <span data-slick-index="2" class="progressBar"></span> </div> </div> </div>

[codepen][1]

Regards,

Answer 2

Even though this question has a lot of down-votes, I'll leave my solution here as I thought it was pretty neat.

It's done entirely using CSS (animations) and the trick is to give each slide an ::after containing the progress bar which on .slick-active gets animated from scaleX(0) to scaleX(1) .

Something like:

@keyframes scale-x-zero-to-max {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

.slick-slide {
    &:after {
        background: blue;

        display: block;
        content: "";

        width: 100%;
        height: .25rem;

        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 99;

        transform: scaleX(0);
        transform-origin: left 50%;
    }

    &.slick-active:after {
        animation: scale-x-zero-to-max 6s linear .8s 1 forwards; // Note that 6s should be same as Slick's autoplaySpeed and .8s same as speed
    }
}

The only issue is that on the first ever slide the .8s delay is incorrect (the slide is already visible and doesn't spend .8s sliding into view). This wasn't an issue for us as the slideshow was below the fold and so most visitors will never notice it. After the first slide has completed it works as it should for all subsequent slides.

Answer 3

I have created a plugin with slick slider have progress bar inside each indicators.

https://github.com/gsushil999/Slick-Slider-Plugin

enter code here

<div class="sliderContainer">
    <div class="slider single-item">
        <div>Slide1</div>
        <div>Slide2</div>
        <div>Slide3</div>
    </div>
    <div class="progressBarContainer">
        <div>

            <span data-slick-index="0" class="progressBar"></span>
        </div>
        <div>

            <span data-slick-index="1" class="progressBar"></span>
        </div>
        <div>

            <span data-slick-index="2" class="progressBar"></span>
        </div>
    </div>
</div>


<script>
    $(".slider").slick({
        infinite: true,
        arrows: false,
        dots: false,
        autoplay: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    });

    //ticking machine
    var percentTime;
    var tick;
    var time = 1;
    var progressBarIndex = 0;

    var progress = $('.inProgress');

    $('.progressBarContainer .progressBar').each(function (index) {
        var progress = "<div class='inProgress inProgress" + index + "'></div>";
        $(this).html(progress);
    });

    function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        tick = setInterval(interval, 10);
    }

    function interval() {
        if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true") {
            progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");

            console.log(progressBarIndex);

            if (progressBarIndex == 1) {
                $(".inProgress0").addClass('on');
                $(".inProgress1").removeClass('on');
            }
            else if (progressBarIndex == 2) {
                $(".inProgress0").addClass('on');
                $(".inProgress1").addClass('on');
            }
            else if (progressBarIndex == 0) {
                $(".inProgress0").removeClass('on');
                $(".inProgress1").removeClass('on');
            }
            startProgressbar();

        } else {
            percentTime += 1 / (time + 2);
            $('.inProgress' + progressBarIndex).css({
                width: percentTime + "%"
            });
            if (percentTime >= 100) {
                $('.single-item').slick('slickNext');

                //console.log(progressBarIndex);

                if (progressBarIndex == 0) {
                    $(".inProgress0").addClass('on');

                }
                else if (progressBarIndex == 1) {
                    $(".inProgress0").addClass('on');
                    $(".inProgress1").addClass('on');
                }
                else if (progressBarIndex == 2) {
                    $(".inProgress0").removeClass('on');
                    $(".inProgress1").removeClass('on');
                }

                progressBarIndex++;

                if (progressBarIndex > 2) {
                    progressBarIndex = 0;
                }
                startProgressbar();

            }

        }
    }

    function resetProgressbar() {
        $('.inProgress').css({
            width: 0 + '%'
        });
        clearInterval(tick);
    }
    startProgressbar();
    // End ticking machine

    $('.progressBarContainer div').click(function () {
        clearInterval(tick);
        var goToThisIndex = $(this).find("span").data("slickIndex");
        $('.single-item').slick('slickGoTo', goToThisIndex, false);
        startProgressbar();
    });


</script>