jquery 如何在Slick Carousel上添加进度条

dy1byipe 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(147)

我有一个1-5的滑块导航图标，如果我点击其中任何一个，绿色的进度条将更新。
例如，如果我点击项目2，进度条将是40%的绿色等...无论有多少项目在光滑的旋转木马，重要的是绿色bgcolor将更新。所以它就像slickCount/100或slickCount*100，但我不确定。我的进度条类是"progress-bar__inner"。

更新：。

代码已在此处更新https://codesandbox.io/。

HTML：

<div class="container">
  <div class="slider slider-for">
    <div class="slider-content">1</div>
    <div class="slider-content">2</div>
    <div class="slider-content">3</div>
    <div class="slider-content">4</div>
    <div class="slider-content">5</div>
  </div>
  <div class="slider-nav-wrapper">
   <div class="slider slider-nav">
      <div class="icons">1</div>
      <div class="icons">2</div>
      <div class="icons">3</div>
      <div class="icons">4</div>
      <div class="icons">5</div>
    </div>
    <div class="progress-bar">
      <div class="progress-bar__inner"></div>
    </div>   
  </div>
</div>

字符串

CSS：

body{
  background:#ccc;
}
.container {
  font-family:Arial;
  max-width:800px;
  display:block;
  margin:0 auto;
  position: relative;
}
.slider-content {
  background: #fff;
  padding: 3rem;
  font-size: 3rem;
  text-align: center;
  height: 200px;
}
.slider-nav-wrapper {
  position: absolute;
  left:3rem;
  right: 3rem;
  bottom: 3rem;
}
.slider-nav-wrapper .icons {
    background: black;
    color: #3498db;
    font-size: 1rem;
    margin: 0 .5rem;
    position: relative;
    text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
.progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background: gray;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}
.progress-bar__inner {
  background: green;
  position: absolute;
  height: 10px;
  top: 0;
  left: 0;
  width: 0;
  transition: width 0.3s ease;
}

型

JS：

$('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: false,
   draggable: false,
   swipe: false,
   swipeToSlide: false,
   touchMove: false,
   asNavFor: '.slider-nav'
 });
 $('.slider-nav').slick({
   slidesToShow: 5,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: false,
   arrows: false,
   focusOnSelect: true,
   variableWidth: true
 });

$('.slider-nav .icons').on('click', function() {
    var index = $(this).index();
    var progressBar = $('.progress-bar__inner');
    var itemWidth = 100 / $('.slider-nav .icons').length;
    var progress = (index + 1) * itemWidth;

    progressBar.css('width', progress + '%');
  });

型

jquery

来源：https://stackoverflow.com/questions/76729252/how-to-add-progress-bar-on-slick-carousel

1条答案

按热度按时间

wqnecbli1#

您可以在documentation中找到回调操作。
例如，我们可以使用beforeChange action。以后可以更改动画类型或回调方法。

$(document).ready(function() {
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: false,
        draggable: false,
        swipe: false,
        swipeToSlide: false,
        touchMove: false,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 5,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: false,
        arrows: false,
        focusOnSelect: true,
        variableWidth: true
    });

    function progressBar(index = 0) {
        var progressBar = $('.progress-bar__inner');
        var itemWidth = 100 / $('.slider-nav .icons').length;
        var progress = (index + 1) * itemWidth;

        progressBar.css('width', progress + '%');
    }

    // Will be triggered on page load
    progressBar();

    // Will be triggered on slider click
    $('.slider-nav .icons').on('click', function() {
        var index = $(this).index();
        progressBar(index);
    });

});

body{
  background:#ccc;
}
.container {
  font-family:Arial;
  max-width:800px;
  display:block;
  margin:0 auto;
  position: relative;
}
.slider-content {
  background: #fff;
  padding: 3rem;
  font-size: 3rem;
  text-align: center;
  height: 200px;
}
.slider-nav-wrapper {
  position: absolute;
  left:3rem;
  right: 3rem;
  bottom: 3rem;
}
.slider-nav-wrapper .icons {
    background: black;
    color: #3498db;
    font-size: 1rem;
    margin: 0 .5rem;
    position: relative;
    text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
.progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background: gray;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}
.progress-bar__inner {
  background: green;
  position: absolute;
  height: 10px;
  top: 0;
  left: 0;
  width: 0;
  transition: width 0.3s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<div class="container">
  <div class="slider slider-for">
    <div class="slider-content">1</div>
    <div class="slider-content">2</div>
    <div class="slider-content">3</div>
    <div class="slider-content">4</div>
    <div class="slider-content">5</div>
  </div>
  <div class="slider-nav-wrapper">
   <div class="slider slider-nav">
      <div class="icons">1</div>
      <div class="icons">2</div>
      <div class="icons">3</div>
      <div class="icons">4</div>
      <div class="icons">5</div>
    </div>
    <div class="progress-bar">
      <div class="progress-bar__inner"></div>
    </div>   
  </div>
</div>

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 如何在Slick Carousel上添加进度条

1条答案

相关问题

热门标签

最新问答