微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

为当前的 Slick Slider 实现一个简单的进度条

分类：编程问答

如何解决为当前的 Slick Slider 实现一个简单的进度条

我正在努力弄清楚如何将此进度条实现为可滚动的光滑滑块 ( https://medium.com/@mjtweaver/building-a-simple-progress-bar-for-slick-slider-d356c8441e9a )

我已经浏览了其他类似的相关帖子，但这似乎是一个略有不同的解决方案，对于我的生活，我无法弄清楚如何将两者结合起来。 感谢您对此的任何帮助。

https://codepen.io/h3creative/pen/yLMzJdJ

$(document).ready(function() {
  var $slider = $('.splide');
  var $progressBar = $('.progress');
  var $progressBarLabel = $( '.slider__label' );

new Splide( '.splide',{
    perPage: 2.5,perMove: 1,type   : 'slider',focus  : 'center',breakpoints: {
        767: {
            perPage: 1,}
    }
} ).mount();

$('.next-splide').click(function() {
    $('.splide__arrow.splide__arrow--next').click();
});

$('.prev-splide').click(function() {
    $('.splide__arrow.splide__arrow--prev').click();
});

// progress bar 
  
  $slider.on('beforeChange',function(event,slick,currentSlide,nextSlide) {   
    var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
    
    $progressBar
      .css('background-size',calc + '% 100%')
      .attr('aria-valueNow',calc );
    
    $progressBarLabel.text( calc + '% completed' );
  });
});
.splide__arrow.splide__arrow--next,.splide__arrow.splide__arrow--prev,.splide__pagination {
    display: none;
}

.splide *:focus { outline: none; }

/**
 *  Progress Bar
 */
.progress {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  
  background-color: #f5f5f5;
  background-image: linear-gradient(to right,black,black);
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size .4s ease-in-out;
 
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0);
  border: 0;
}


/** Main CSS **/

.section-slider {
  position: relative;
  z-index: 2;
  overflow: hidden;
  max-width: 1400px;
  margin-top: 15vh;
  margin-right: auto;
  margin-left: auto;
}

.splide-slider_list {
  display: -webkit-Box;
  display: -webkit-flex;
  display: -ms-flexBox;
  display: flex;
  -webkit-Box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-Box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.control {
  position: relative;
  display: -webkit-Box;
  display: -webkit-flex;
  display: -ms-flexBox;
  display: flex;
  overflow: hidden;
  width: 80px;
  height: 140px;
  margin-right: 0.5em;
  margin-left: 0.5em;
  -webkit-Box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-Box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #e9e9e9;
  opacity: 0.66;
  color: #0d0628;
}

.control:active {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.control__fill {
  position: absolute;
  left: auto;
  top: 0%;
  right: 0%;
  bottom: auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin-top: -100%;
  margin-right: -100%;
  border-radius: 50%;
  background-color: #0d0628;
}

.container {
  width: 100%;
  max-width: 2000px;
  margin-right: auto;
  margin-left: auto;
  padding: 4.06em;
}

.container.is--slider {
  padding-top: 0em;
  padding-bottom: 0em;
}

.control__arrow {
  position: relative;
  display: block;
  -webkit-Box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-Box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.control__arrow.is--flipped {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.slick-slider_item {
  width: 44%;
  height: auto;
  margin-right: 16px;
  -webkit-Box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.section.is--slider {
  position: relative;
  z-index: 2;
}

.section.is--slider {
  position: relative;
  z-index: 2;
  margin-top: 15vh;
  margin-bottom: 5em;
}

.slick-slider_controls {
  position: absolute;
  left: auto;
  top: 0%;
  right: 0%;
  bottom: 0%;
  display: -webkit-Box;
  display: -webkit-flex;
  display: -ms-flexBox;
  display: flex;
  width: 100%;
  height: 140px;
  margin: auto;
  -webkit-Box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-Box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.slick-slider_container {
  width: 100%;
  max-width: 2000px;
}

.slick-slider_grid-col-1 {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: minmax(auto,40vh) auto;
  grid-template-rows: minmax(auto,40vh) auto;
}

.slick-slider_Box1 {
  position: relative;
}

.silck-slider_image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.slick-slider_step-text {
  position: absolute;
  left: 32px;
  top: 32px;
  right: auto;
  bottom: auto;
  font-family: Montserrat,sans-serif;
  color: #fff;
  font-size: 48px;
  font-weight: 400;
}

.margin-bottom-small {
  margin-bottom: 16px;
}

.slick-slider_title {
  font-family: Montserrat,sans-serif;
  color: #494949;
  font-size: 18px;
  font-weight: 600;
}

.page-padding {
  padding-right: 32px;
  padding-left: 32px;
}

.splide__list {
  display: -webkit-Box;
  display: -webkit-flex;
  display: -ms-flexBox;
  display: flex;
  -webkit-Box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-Box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.control-2 {
  position: relative;
  display: -webkit-Box;
  display: -webkit-flex;
  display: -ms-flexBox;
  display: flex;
  overflow: hidden;
  width: 3.33em;
  height: 3.33em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  -webkit-Box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-Box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-style: solid;
  border-width: 2px;
  border-color: #0d0628;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 200ms ease;
  transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
  transition: transform 200ms ease,-webkit-transform 200ms ease;
  color: #0d0628;
}

.control-2:active {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.control__arrow-2 {
  position: relative;
  z-index: 2;
  display: block;
  width: 1.5em;
  height: 1.3em;
  -webkit-Box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-Box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 1;
}

.control__arrow-2.is--flipped {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.splide__slide {
  width: 580px;
  padding-right: 0.52em;
  padding-left: 0.52em;
  -webkit-Box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.controls {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 4;
  display: -webkit-Box;
  display: -webkit-flex;
  display: -ms-flexBox;
  display: flex;
  width: 100%;
  height: 140px;
  margin: auto;
  -webkit-Box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-Box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.overflow-hidden {
  overflow: hidden;
  width: 100%;
}

.margin-top-small {
  margin-top: 16px;
}

@media screen and (max-width: 991px) {
  .container {
    padding-right: 3em;
    padding-left: 3em;
  }
}

@media screen and (max-width: 767px) {
  .container {
    padding-right: 4.9em;
    padding-left: 4.9em;
  }

  .slick-slider_item {
    width: 100%;
    min-height: 89em;
    padding-right: 0.92em;
    padding-left: 0.92em;
  }

  .section.is--slider {
    margin-bottom: 9.9em;
  }

  .section.is--slider {
    margin-bottom: 9.9em;
  }

  .slick-slider_controls {
    margin-bottom: -3em;
    font-size: 2em;
  }

  .splide__slide {
    width: 100%;
    min-height: 89em;
    padding-right: 0.92em;
    padding-left: 0.92em;
  }

  .controls {
    margin-bottom: -3em;
    font-size: 2em;
  }
}

@media screen and (max-width: 479px) {
  .slick-slider_controls {
    margin-bottom: -47px;
    font-size: 10px;
  }

  .controls {
    margin-bottom: -47px;
    font-size: 10px;
  }
}
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <div class="overflow-hidden">
    <section class="section is--slider">
      <div class="container is--slider">
        <div class="splide">
          <div class="splide__track">
            <div class="splide__list">
              <div class="splide__slide">
                <div class="slick-slider_grid-col-1">
                  <div class="slick-slider_Box1"><img src="https://assets.website-files.com/60af85927bab4837eaacdee8/60af95b65882e9dceea8fda4_Rectangle%201.jpg" loading="lazy" width="436" alt="" class="silck-slider_image">
                    <div class="slick-slider_step-text">STEP 1</div>
                  </div>
                  <div class="slick-slider_content">
                    <div class="margin-bottom-small">
                      <h3 class="slick-slider_title">Step 1 - first slide title</h3>
                    </div>
                    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus,mi quis viverra ornare,eros dolor interdum nulla,ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
                  </div>
                </div>
              </div>
              <div class="splide__slide">
                <div class="slick-slider_grid-col-1">
                  <div class="slick-slider_Box1"><img src="https://assets.website-files.com/60af85927bab4837eaacdee8/60af95b6fe4fd5cd9aebd993_Rectangle%203.jpg" loading="lazy" width="436" alt="" class="silck-slider_image">
                    <div class="slick-slider_step-text">STEP 2</div>
                  </div>
                  <div class="slick-slider_content">
                    <div class="margin-bottom-small">
                      <h3 class="slick-slider_title">Step 2 - second slide title</h3>
                    </div>
                    <p>Lorem ipsum dolor sit amet,ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
                  </div>
                </div>
              </div>
              <div class="splide__slide">
                <div class="slick-slider_grid-col-1">
                  <div class="slick-slider_Box1"><img src="https://assets.website-files.com/60af85927bab4837eaacdee8/60af95b668622c827408faa4_Rectangle%202-1.jpg" loading="lazy" width="436" alt="" class="silck-slider_image">
                    <div class="slick-slider_step-text">STEP 3</div>
                  </div>
                  <div class="slick-slider_content">
                    <div class="margin-bottom-small">
                      <h3 class="slick-slider_title">Step 3 - third slide title</h3>
                    </div>
                    <p>Lorem ipsum dolor sit amet,ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
                  </div>
                </div>
              </div>
              <div class="splide__slide">
                <div class="slick-slider_grid-col-1">
                  <div class="slick-slider_Box1"><img src="https://assets.website-files.com/60af85927bab4837eaacdee8/60af95b77bab484c8aad44f4_Rectangle%202.jpg" loading="lazy" width="436" alt="" class="silck-slider_image">
                    <div class="slick-slider_step-text">STEP 4</div>
                  </div>
                  <div class="slick-slider_content">
                    <div class="margin-bottom-small">
                      <h3 class="slick-slider_title">Step 4 - fourth slide title</h3>
                    </div>
                    <p>Lorem ipsum dolor sit amet,ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="margin-top-small">
          <div class="w-embed">
            <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
              <span class="slider__label sr-only">
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="controls">
        <a data-w-id="5fe2242b-3646-31b1-263c-bc32535b69cd" href="#" class="control prev-splide w-inline-block">
          <div class="control__fill"></div>
          <div class="control__arrow-2 w-embed"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 18">
              <path fill="currentColor" d="M23.999,8H5.481c5.009-2.91,6.349-7.311,6.416-7.548L9.976-0.102C9.9,0.156,8.03,6.213-0.073,8.024L0.146,9
    l-0.218,0.976C8.03,11.787,9.9,17.844,9.976,18.101l1.922-0.554C11.83,17.31,10.49,12.91,5.481,10h18.518V8z"></path>
            </svg></div>
        </a>
        <a href="#" class="control next-splide w-inline-block">
          <div class="control__fill"></div>
          <div class="control__arrow-2 is--flipped w-embed"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 18">
              <path fill="currentColor" d="M23.999,10h18.518V8z"></path>
            </svg></div>
        </a>
      </div>
    </section>
  </div>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot