时间戳

首页 > 解决方案 > 为当前的 Slick Slider 实现一个简单的进度条

javascript - 为当前的 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,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, 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/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, 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/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, 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>
          </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,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>
      </div>
    </section>
  </div>

标签： javascriptsliderslick.jsslide.js

解决方案

推荐阅读