Как сделать slick слайдер с горизонтальным прогресс баром?

#javascript #slider #progress_bar #slickjs

Нужно сделать таймер как здесь http://www.apple.com/ 

Слайдер сделан с помощью slick.js, но к сожалению в плагине нет такого таймера. Можно
ли было Speed передавать прогресс-бару?



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

 

                
1
                
2
                
3
                
4
                
5





    

Ответы

Ответ 1

добавлено css



$(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-color:#ccbdb6;
  background-size:100% 100%;
  background-image:-webkit-gradient(linear, left, right, color-stop(1, rgb(16,56,16)),
color-stop(1, transparent));
  background-image:-o-linear-gradient(left, rgb(16,56,16) 100%, transparent);
  background-image:-moz-linear-gradient(left, rgb(16,56,16) 100%, transparent);
  background-image:-webkit-linear-gradient(left, rgb(16,56,16) 100%, transparent);
  background-image:linear-gradient(to right,rgb(16,56,16) 100%,transparent 100%);
  background-repeat:no-repeat;
}

.slider .slick-dots li:last-child{
  margin-right:0;
}

.slider .slick-dots li:hover,.slider .slick-dots li.slick-active{
  background-color:#a08a7f;
}

.slider .slick-dots li button{
  display: none !important;
}

.slider .slick-dots li.slick-active~li{
  background-size:0% 0%;
}

.slider .slick-dots li.slick-active{
  -webkit-animation:right 3s ease-in-out forwards;
  -moz-animation:right 3s ease-in-out forwards;
  -o-animation:right 3s ease-in-out forwards;
  animation:right 3s ease-in-out forwards;
}

@keyframes right{
  0%{
    background-size:0% 100%;
  }

  100%{
    background-size:100% 100%;
  }
}



  

    
1
  
  

    
2
  
  

    
3
  
  

    
4
  
  

    
5
  




Ответ 2

Первое, что приходит на ум — это сделать CSS-анимацию. Но в тестах этот вариант показывает
себя не с лучшей стороны, поскольку CSS-таймеры и JS-таймеры могут ходить с разной
скоростью. К тому же, так у нас появляется две точки управления анимацией, т. е. когда
необходимо заменить скорость смены слайдов, надо это делать в CSS и JS.

Мой вариант работает на коллбеках, описанные выше проблемы исключены.

UPD: заменил анимацию ширины на анимацию масштабирования для увеличения производительности.



$(function(){
  var speed = 2000,
      $li;
  
  $('.slider').on('init', function(slick) {
    $(slick.target).find('button').append('');
    
    $li = $(slick.target).find('.slick-dots li');
    animateSpan(0, $li);
  });

  $('.slider').slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: speed     
  });
  
  $('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
    $li.find('button span').stop(true, true);
    $li.find('button').removeClass('filled');
    
    if(currentSlide == 0) {
      $li.find('button span').css({
        'transform': 'scaleX(0)',
        'border-spacing': 0
      });
    } else {
      // всем до текущего слайда назначить класс, чтобы они были заполнены
      for(var i = 0; i < currentSlide; i++) {
        $li.eq(i).find('button').addClass('filled');
      }
      
      // всем после текущего слайда убрать классы и ширину, чтобы были пустыми
      
      for(var i = currentSlide + 1; i < $li.length + 1; i++) {
        $li.eq(i - 1).find('button').removeClass('filled')
          .find('span').css({
        'transform': 'scaleX(0)',
        'border-spacing': 0
      });
      }
    }
    
    animateSpan(currentSlide, $li);
  });
  
  function animateSpan(currentSlide, $li) {
    var $currentBtn = $li.eq(currentSlide).find('span');
    
    $currentBtn.animate({  borderSpacing: 1 }, {
      step: function(now, fx) {
        $(this).css('transform', 'scaleX('+ now +')');  
      },
      duration: speed
    }, 'linear');
  }
})
.slider {
  width: 400px;
}

.slider__item {
  padding: 50px;
  background-color: #666;
  color: #FFF;
  font-size: 20px;
  text-align: center;
}

.slider ul {
  margin: 20px;
  padding: 0;
}

.slick-dots {
  text-align: center;
}

.slick-dots li {
  list-style-type: none;
  display: inline-block;
}

.slick-dots button {
  width: 25px;
  height: 10px;
  margin: 0 2px;
  border: 0;
  background-color: #ccc;
  list-style-type: none;
  position: relative;
  font-size: 0;
}

.slick-dots button span {
  position: absolute;
  width: 100%;
  display: block;
  height: 100%;
  background-color: #000;
  left: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left;
}

.slick-dots button.filled span {
  transform: scaleX(1) !important;
}




  
1
  
2
  
3
  
4
  
5
  
6