Как создать слайдер с индикатором выполнения, как это http://www.apple.com/

Question

Мне нужен слайдер с разбивкой по таймеру на точках, например http://www.apple.com. Я использовал slick.js. Вместо точек я должен сделать индикатор выполнения.

Как заменить кнопки разбиения на страницы индикаторами выполнения?

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

Просто должен был сделать это для моей компании вчера. Это было немного сложнее, потому что на нашем веб-сайте было выполнено 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() { 
 
    \t clearInterval(tick); 
 
    \t var goToThisIndex = $(this).find("span").data("slickIndex"); 
 
    \t $('.single-item').slick('slickGoTo', goToThisIndex, false); 
 
    \t 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]

С уважением,

Answer 2

Хотя этот вопрос имеет много супрессорных голосов, я оставлю мое решение здесь, как я подумал, что это довольно аккуратно.

Это сделано исключительно с помощью CSS (анимации) и хитрость заключается в том, чтобы дать каждому Наденьте ::after, содержащий индикатор, который на .slick-active получает всплывающий из scaleX(0) в scaleX(1).

Что-то вроде:

@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 
    } 
} 

Единственная проблема в том, что на первый слайд .8s задержку неверен (слайд уже виден и не тратить .8s скольжения в поле зрения). Это не было проблемой для нас, так как слайд-шоу было ниже фокуса, и поэтому большинство посетителей этого никогда не заметят. После завершения первого слайда он работает так же, как и для всех последующих слайдов.

Answer 3

Я создал плагин со скользким слайдером, который имеет индикатор выполнения внутри каждого индикатора.

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>