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 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')
});
});
I can't figure out why dots in other slides don't have ".slick-active" class on them.
I can not get complete HTML but the below solution may be helpful to you.
.slick-dots li.slick-active button:before{
color: orange
}
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;
}