Slick slider dots not changing color-CodePudding

I am using slick slider and website that I'm working on needs to have slider that have controls within slide content. I managed to append arrows into ".controls" div and then append dots between arrows buttons. At first it looked like everything is working fine but I noticed that dots are not behaving correctly. Only first slide have fully functioning dots that change color on slide change. How can I make dots in other slides to change color also?

How it looks: First slide: dots color indicates first slide Second slide: all dots on second slide are white

<div >
<div >
    <div >
        <h3></h3>
        <h4></h4>
        <p></p>
        <div >
            <button type="button" ></button>
            <div ></div>
            <button type="button" ></button>
        </div>
    </div>
</div>
</div>

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

I can't figure out why dots in other slides don't have ".slick-active" class on them.

CodePudding user response：

I can not get complete HTML but the below solution may be helpful to you.

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

CodePudding user response：

try this once--

  .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;
}