web-dev-qa-db-fra.com

slick.js carousel comment enlever des chiffres de slick-dots

J'ai parcouru slick-theme.css et je ne vois pas comment cacher les nombres insérés après les points.

Quelqu'un peut-il m'éclairer? 

8
user6285978

Mettez dans votre fichier css:

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

Les nombres peuvent être supprimés à l'aide de la propriété text-indent.

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

Ajouter cela a fonctionné pour moi

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

Le mieux serait de créer vos propres points sur un pseudo-élément, car les points que vous voyez proviennent du list-item

Voilà comment slick le fait pour leur propre thème:

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

vous pouvez utiliser jquery pour supprimer les points

Docs

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