幻灯片处于活动状态时更改标签的颜色

Question

谁能帮帮我我正在尝试更改文本活动幻灯片的颜色。

因此，如果幻灯片 1 处于活动状态，则屏幕底部的文本“幻灯片 1”应变为黄色，其他 2 个保持白色。

如果幻灯片 2 处于活动状态，“幻灯片 2”应该变成黄色 enz。

我使用的代码是：“https://codepen.io/omairatiq/pen/wvBoGaE”

$(document).ready(function(){
    

    $(".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 () {
        clearInterval(tick);
        var goToThisIndex = $(this).find("span").data("slickIndex");
        $('.single-item').slick('slickGoTo', goToThisIndex, false);
        startProgressbar();
    });
    
        
});

h3 {
  margin:5px 0; 
  color: black;
}

.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://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<body>
<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>
</body>

抱歉我的英语不好。

Answer 1

您可以通过这种方式自定义此脚本。在 js 文件的函数 Interval() 中，这一行上方

$('.inProgress' + progressBarIndex).css({
    width: percentTime + "%"
});

添加这部分

$('.inProgress').parent().parent().removeClass("yellow-text");
$('.inProgress' + progressBarIndex).parent().parent().addClass("yellow-text");

并在 css 文件中添加这一行

.yellow-text h3{
  color :yellow;
}

最后，Full Interval函数是

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').parent().parent().removeClass("yellow-text");
        $('.inProgress' + progressBarIndex).parent().parent().addClass("yellow-text");

        $('.inProgress' + progressBarIndex).css({
            width: percentTime + "%"
        });
        if (percentTime >= 100) {
            $('.single-item').slick('slickNext');
            progressBarIndex++;
            if (progressBarIndex > 2) {
                progressBarIndex = 0;
            }
            startProgressbar();
        }
    }
}

详细查看这里 https://codepen.io/jamesjo29155352/pen/NWjOrrx

幻灯片处于活动状态时更改标签的颜色

Change color of label when slide is active

javascript

css

jquery

jquery-ui

slick.js