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

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?

Lannie

I'm not sure what you mean. There shouldn't be any numbers inserted after the dots. Can you post a screenshot? – Jovi

Answer 1

The official solution is this according to slick.css

.slick-dots li button { 
   font-size: 0; 
} 

Sensational

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

Kamchatka

Answer 3

Adding this worked for me

.slick-dots li button {
    display: none;
}

Stapleton

Answer 4

Numbers can be removed by using the text-indent property.

.slick-dots li button {
   text-indent: -9999px;
}

Czardas

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);

Hesione

You should add some explanation to your answer. – Bratcher

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 }

Dramatist

Answer 7

$(".slider").slick({
   customPaging: function(slider) {
      return '<button type="button"/>';
   }
});

Alms

Thank you for your interest in contributing to the Stack Overflow community. This question already has a few answers—including some that have been validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? – Singularize

Answer 8

you can use jquery to remove the dots

Docs

$('.your-slider').slick({
   dots: false
});

Mekka

I believe the OP is asking for how to remove numbers which appear after the dots, and not the dots themselves – Collarbone