tengo una serie de puntos que quiero colocar en el centro de la pantalla.
El número de puntos es aleatorio, a veces vendrán más o menos.
El problema es que quiero que se ajuste al centro, pero lo que estoy consiguiendo es que empiece a partir del centro.
El código es:
.carousel--Multi-4 {
position: relative;
}
.carousel--Multi-4 .slick-dots {
position: absolute;
bottom: -10px;
left: calc(50%);
list-style-type: none;
list-style-position: outside;
}
.carousel--Multi-4 .slick-dots li {
float: left;
height: 8px;
width: 8px;
margin: 0 6px;
border-radius: 4px;
background-color: #dedede;
text-indent: -9999px;
cursor: pointer;
}
.carousel--Multi-4 .slick-dots .slick-active {
background-color: #ec0000;
}
Dichos "puntos" se generan automáticamente con la librería slick http://kenwheeler.github.io/slick/
Gracias.
Del Cdn ->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
Código para crear el slick ->
$('.carousel--Multi-4').slick({
arrows: false,
dots:false,
slidesToShow: 3,
autoplay: configuracion.autoplay,
autoplaySpeed: configuracion.duracionTransicion,
responsive: [
{
breakpoint: 708,
settings: {
dots: true,
infinite: true,
slidesToShow: 1.25,
slidesToScroll: 1,
arrows: false,
infinite: true,
speed: 300
}
}
]
});
slick-theme.css
que es donde le da estilos a los puntos. Por otra parte (aunque no tiene que ver con tu problema) ese CDN que usas no tiene la última version de slick, yo usariacdnjs
que esta más actualizado