如何使用光滑滑块用进度条替换计时器分页

Question

所以，我正在尝试复制apple.com风格的轮播。我想要计时器分页，到目前为止我已经完成了这么多：jsfiddle

如何用进度条替换分页按钮？这是我到目前为止所拥有的：

$(document).ready(function() {
  var time = 2;
  var $bar,
    $slick,
    isPause,
    tick,
    percentTime;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true,
  });

  $bar = $('.slider-progress .progress');

  $('.slider-wrapper').on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
    }
  })

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

  function interval() {
    if (isPause === false) {
      percentTime += 1 / (time + 0.1);
      $bar.css({
        width: percentTime + "%"
      });
      if (percentTime >= 100) {
        $slick.slick('slickNext');
        startProgressbar();
      }
    }
  }

  function resetProgressbar() {
    $bar.css({
      width: 0 + '%'
    });
    clearTimeout(tick);
  }
  startProgressbar();
});

.slider-wrapper {
  width: 600px;
}
.slider {
  width: 600px;
  height: 400px;
  border: 1px solid #000;
}
.slide {
  width: 100%;
  height: 398px;
  background: #ccc;
}
#slick-1 .slick-dots li {
  width: 40px;
  height: 5px;
  background: #ccc;
}
#slick-1 .slick-dots li button {
  width: 40px;
  height: 5px;
}
#slick-1 .slick-dots li.slick-active,
#slick-1 .slick-dots li:hover {
  background: #777;
}
#slick-1 .slick-dots li button,
#slick-1 .slick-dots li button:before {
  color: transparent;
  opacity: 0;
}
/* progress bar */

.slider-progress {
  width: 100%;
  height: 3px;
  background: #eee;
}
.slider-progress .progress {
  width: 0%;
  height: 3px;
  background: #000;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>


<div class="slider-wrapper" id="slick-1">
  <div class="slider">
    <div class="slide">slider #1</div>
    <div class="slide">slider #2</div>
    <div class="slide">slider #3</div>
  </div>
  <div class="slider-progress">
    <div class="progress"></div>
  </div>
</div>

Answer 1

昨天刚为我的公司做这件事。这有点棘手，因为我们的网站上实现了 slick，有 2 个过渡：如果我们使用鼠标则滑动，如果不使用鼠标则淡入淡出。

不管怎样，我昨天在挖掘的时候记得你的帖子，所以我在这里把它简化了。

$(".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>

[代码笔][1]

问候，