slick.js carousel how to remove numbers from slick-dots - jquery-plugins

Question

I've been looking through the slick-theme.css and I can't figure out how to hide the numbers inserted after the dots.
Can anyone enlighten me?

Answer 1

The official solution is this according to slick.css
.slick-dots li button {
font-size: 0;
}

Answer 2

The best way would it be to create your own dots on a pseudo element, since the dots you see come from the list-item.
That's how slick is doing it for their own theme:
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:before {
content: '•';
font-size: 22px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
text-align: center;
opacity: .25;
color: black;
}

Answer 3

Adding this worked for me
.slick-dots li button {
display: none;
}

Answer 4

Numbers can be removed by using the text-indent property.
.slick-dots li button {
text-indent: -9999px;
}

Answer 5

You can remove text of the button with javascript like this:
var dotNums = document.querySelectorAll(".slick-dots button");
function removeText(item) {
item.innerHTML = ""; // or put the text you need inside quotes
}
dotNums.forEach(removeText);

Answer 6

This is what I did to remove the numbers from the dots.
solution 1
setTimeout(function(){ const dots = document.querySelectorAll('.slick-dots li button') dots.forEach(dot=>dot.innerHTML="") },1000)
.slick-dots li button doesn't happen to be part of the DOM when the page loads. it's is added after the slider start sliding.
Recommended solution
.slick-dots li button {
text-indent:-1000
}

Answer 7

you can use jquery to remove the dots
Docs
$('.your-slider').slick({
dots: false
});