4

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.

introducir la descripción de la imagen aquí

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
                                 }
                            }
                        ]
                      });
5
  • 2
    ¿Podrías poner también tu HTML? Sólo con el CSS es complicado ver lo que puede estar pasando.
    – Kiko_L
    Commented el 18 feb. 2019 a las 11:35
  • ¿Estás usando los estilos que vienen con la librería? Por defecto los puntos están centrados.
    – user7176
    Commented el 19 feb. 2019 a las 7:28
  • Me estoy trayendo los cdn -> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <script src="ajax.googleapis.com/ajax/libs/jquery/3.3.1/…> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
    – EduBw
    Commented el 19 feb. 2019 a las 11:46
  • Si quito los estilos, los "puntos" salen pegados a la parte izquierda de la pantalla, pero no son puntos, son los números de los contenidos del carousel.
    – EduBw
    Commented el 19 feb. 2019 a las 11:47
  • 1
    Te falta el css 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 usaria cdnjs que esta más actualizado
    – user7176
    Commented el 21 feb. 2019 a las 7:40

2 respuestas 2

1

Trata de no usar float: left utiliza mejor display: inline-block

Este sería mi código modificado

.carousel--Multi-4 {
    position: relative;
  }
  .carousel--Multi-4 .slick-dots {
    position: absolute;
    bottom: -10px;
    left: 0;
    rigth: 0;
    width: 100%;
    list-style-type: none;
    list-style-position: outside;
  }
  .carousel--Multi-4 .slick-dots li {
    display: inline-block;
    vertical-align: middle;
    height: 8px;
    width: 8px;
    margin: 0 6px;
    border-radius: 4px;
    background-color: #dedede;
    cursor: pointer;
  }
  .carousel--Multi-4 .slick-dots .slick-active {
    background-color: #ec0000;
  }
2
  • 1
    Gracias por contestar y perdón por tardar, he ejecutado tu código, te comento, sale desde la parte izquierda de la pantalla y se están eliminando los estilos, por defecto salen los números del carousel, mi css, quita esos números y los pone como puntos rojos, tú código quita mis estilos y vuelve a poner los números del carousel. gracias.
    – EduBw
    Commented el 19 feb. 2019 a las 11:43
  • entiendo por eso agregabas el text-indentsolo es ponerlo entonces Commented el 19 feb. 2019 a las 13:50
1

Si todos los puntos, o los puntos que aleatoriamente vayan a generarse los añades a un <div> en el que con css hagas que se coloque en el centro el bloque, y por por tanto, el contenido del mismo.

Por ejemplo:

<div class="container">
<!-- Aquí es donde se deben colocar los puntos -->
</div>

En el archivo css alienar el bloque:

.container {
    text-align: center;
}
1
  • Gracias por contestar y perdón por tardar, La librería crea los elementos html <ul> <li> de forma autómatica y los mete en el dom a su placer, por lo tanto no puedo encerrarlos en ningún div. gracias.
    – EduBw
    Commented el 19 feb. 2019 a las 11:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.