CODEWITHSUNDEEP
jquery-pluginsslick.js
user6285978
user6285978

Reputation:

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

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?

Upvotes: 13

Views: 31706

Answers (8)

GMO
GMO

Reputation: 1

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

Upvotes: 0

Felix
Felix

Reputation: 21

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 }

Upvotes: 0

Elder Carvalho
Elder Carvalho

Reputation: 808

The official solution is this according to slick.css

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

Upvotes: 22

Ivan
Ivan

Reputation: 380

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

Upvotes: 1

Shikkha Gupta
Shikkha Gupta

Reputation: 41

Adding this worked for me

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

Upvotes: 4

Celso
Celso

Reputation: 605

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

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

Upvotes: 3

Orlandster
Orlandster

Reputation: 4868

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

Upvotes: 5

Mariano Garcia
Mariano Garcia

Reputation: 5

you can use jquery to remove the dots

Docs

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

Upvotes: -3

Related Questions