3

Нужно сделать таймер как здесь 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; }
<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>

2

2 ответа 2

7

добавлено 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%;
  }
}
<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>

3

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

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

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

$(function(){
  var speed = 2000,
      $li;
  
  $('.slider').on('init', function(slick) {
    $(slick.target).find('button').append('<span></span>');
    
    $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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<ul class="slider">
  <li class="slider__item">1</li>
  <li class="slider__item">2</li>
  <li class="slider__item">3</li>
  <li class="slider__item">4</li>
  <li class="slider__item">5</li>
  <li class="slider__item">6</li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.