So, I'm trying to copy apple style of carousel. I wanted to have timer pagination so so far I have this much done: jsfiddle

How can I replace pagination buttons with progress bars? Here is what I have so far:

$(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=".1.1.min.js"></script>
<script src=".0.0/js/bootstrap.min.js"></script>
<script src=".slick/1.6.0/slick.min.js"></script>
<link href=".0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href=".slick/1.6.0/slick.css" rel="stylesheet"/>
<link href=".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>

So, I'm trying to copy apple. style of carousel. I wanted to have timer pagination so so far I have this much done: jsfiddle

How can I replace pagination buttons with progress bars? Here is what I have so far:

$(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./jquery-3.1.1.min.js"></script>
<script src="https://netdna.bootstrapcdn./bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr/jquery.slick/1.6.0/slick.min.js"></script>
<link href="https://netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./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>

• javascript
• jquery
• carousel

2 Answers 2

Just had to do this for my pany 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://rawgit./kenwheeler/slick/master/slick/slick.js"></script>
<link href="https://rawgit./kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit./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,

I am not entirely entirely familiar with these, but it seems you have been able to get the progressbar running, so it should not be that hard to turn the pagination buttons to progressbars.

What might help is that each of them has an element id (first is "slick-slide00") and the active one has a class "slick-active".

So if you want a hacky solution it might be enough to retrieve "slick-active" element every time the the slide changes (there should be listenable event for that) and turn the element with "slick-active" class into a progress bar.

For a "cleaner" solution you might need to dig into framework itself as the feature doesn't seem to be supported as of now.