请选择 进入手机版 | 继续访问电脑版

网络科技

    今日:51| 主题:284744
收藏本版
互联网、科技极客的综合动态。

[其他] Building a Simple Progress Bar for Slick Slider

[复制链接]
梦转千遍如若初见 发表于 2016-10-16 07:09:23
268 4

Building a Simple Progress Bar for Slick Slider

Building a Simple Progress Bar for Slick Slider-1-网络科技-completed,solution,readers,decided,develop
        This week I found myself needing to develop a progress bar attached to an image carousel. My carousel of choice is always Slick Slider .
  After a quick search, I realised there probably wasn’t an out of the box solution, so I decided to build one using some basic jQuery and utilising some simple CSS.
  This is all very simple stuff, so feel free to copy this into your project if you need it.
  HTML

  1. <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">  <span class="progress__true"></span>  <span class="slider__label sr-only"></div>
复制代码
For accessibility reasons, notice we’ve added the role attribute, aria attributes (valuemin and valuemax) to help for screen readers as well as the label span which won’t be visible to normal users.
   The .progress__true span will act as the completed section of the bar.]
  CSS ( or in this case some SCSS )

  1. .progress {  display: flex;  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);  border-radius: 10px;  overflow: hidden;  background-color: #f5f5f5;
复制代码
  1. &__true {    background-color: black;    min-width: 5%;    transition: all .4s ease-in;    height: 10px;  }}
复制代码
The CSS is also very simple.
  The box shadow, and border radius ( as well as overflow-hidden ) ensures the element looks a little more like a progress bar, and the background colour is needed for the completed bar to stand out.
  Adding a simple transition to the completed bar will improve it’s appearance. It’s also a good idea to add a min-width to this element, so that the progress bar doesn’t appear broken whilst the user is waiting for any JavaScript to load.
  jQuery

  1. function calcProgress( count, current ) {  var calc = ( ( current + 1 ) / count ) * 100;  var notCompleted = 100 - calc;  $( '.progress__true' ).css( 'width', calc + '%' );  $( '.progress' ).attr('aria-valuenow', calc );  $( '.slider__label' ).text( calc + '% completed' );};
复制代码
The above function handles the progress bar calculations.
  We’ll need to pass through two variables into the function:
  
       
  • The number of slides   
  • The current slide number  
  Having these two pieces of information will help us calculate the the progress of the carousel.
  Slick Slider makes gathering this information really easy…
  1. var count = slick.slideCount;var current = slick.currentSlide;
复制代码
Once we have that information, we need to add the width to the completed progress bar element, as well as adding some helpful screen reader attributes and labels.
   The aria-valuenow attribute should be added to the progress bar itself, and adding the text to the hidden span will help those using screen readers.
  We now need to set this function to run at two different times:
  
       
  • On initialisation of the carousel   
  • When the carousel changes slide  
  To do this we can use the following events…
  1. $('.slider').on('init', function(event, slick) {  // the init event must be declared before the  // carousel  var count = slick.slideCount;  var current = slick.currentSlide;  calcProgress( count, current );});
复制代码
Using the on ‘init’ event will fire this once the carousel loads to give us the initial progress bar values.
  It’s important to note that we must declare this event BEFORE the slick carousel itself.
  We also need to make sure the progress bar updates as the carousel rotates the slides. To do this we can use the ‘afterChange’ event.
  1. $('.slider').on('afterChange', function(event, slick) {  var count = slick.slideCount;  var current = slick.currentSlide;  calcProgress( count, current );});
复制代码
The Completed Progress Bar

  I’ve saved the above code in CodePen.
  Let me know your thoughts, or if there is a better way of achieving the same goal.
寄瑶 发表于 2016-10-16 08:46:31
欢乐,不颂~
回复 支持 反对

使用道具 举报

wo_shi_shui 发表于 2016-10-16 12:25:39
OMG!介是啥东东!!!
回复 支持 反对

使用道具 举报

eqxygmqrny 发表于 2016-10-22 12:23:28
楼上的这是啥态度呢?
回复 支持 反对

使用道具 举报

phpsir 发表于 2016-10-22 12:28:54
在撸一遍。。。
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表