光滑的滑块点不改变颜色

Question

我正在使用光滑的滑块，并且我正在处理的网站需要具有在幻灯片内容中具有控件的滑块。我设法将箭头附加到“.controls” div 中，然后在箭头按钮之间附加点。起初看起来一切正常，但我注意到点的行为不正确。只有第一张幻灯片具有功能齐全的点，这些点会在幻灯片更改时改变颜色。如何在其他幻灯片中制作圆点来改变颜色？

外观： 第一张幻灯片： dots color indicates first slide 第二张幻灯片： all dots on second slide are white

<div class="slick-slider">
<div class="slide">
    <div class="wrapper text">
        <h3></h3>
        <h4></h4>
        <p></p>
        <div class="controls">
            <button type="button" class="prev-slide"></button>
            <div class="dots"></div>
            <button type="button" class="next-slide"></button>
        </div>
    </div>
</div>
</div>

$(document).ready(function(){
$('.slick-slider').slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    appendDots: $('.dots'),
    prevArrow: $('.prev-slide'),
    nextArrow: $('.next-slide')
});
});

我不明白为什么其他幻灯片中的点没有“.slick-active”类。

Answer 1

我无法获得完整的 HTML，但以下解决方案可能对您有所帮助。

.slick-dots li.slick-active button:before{
  color: orange
}

Answer 2

试试这个--

  .slick-dots button {
  display: block;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: blue;
  text-indent: -9999px;
}
.slick-dots li.slick-active button {
  background-color: red;
}