De forma predeterminada, las imágenes se alinean a la izquierda. El uso de la configuración de centerMode: true las imágenes están alineadas en un par de píxeles a la izquierda, y el borde de la imagen siguiente es mirar desde el lado derecho, como se muestra:

Slick.js cómo alinear las imágenes en el centro del carrusel?

Estos son los valores utilizados:

for (var i in data.image_set) {
    sc.append('<div><img src="' + data.image_set[i].image + '" height="' + data.image_set[i].height + '" width="' + data.image_set[i].width + '"></div>');
}
sc.slick({
    dots: true,
    speed: 150,
    centerMode: true
});

Me gustaría tener el control deslizante de la pantalla de una sola imagen en el centro, y tener, opcionalmente, el anterior y el siguiente de imágenes parcialmente visibles a los lados izquierdo y derecho respectivamente. ¿Cómo puede lograrse esto?

JS:

$(document).ready(function() {
  $('.sc').slick({
    dots: true,
    speed: 150,
    centerMode: true
  });
});

CSS:

.sc img {
  height: calc(50vh - 100px);
  width: auto;
}

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="sc">
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/I152rUr6ZBih.png?Signature=YFF9BB8dlAe7okzBHnRLWgYmFI8%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/A6CZ5y6EUmNg.png?Signature=bsArQ0sX8o9mtgIISwtFPW2hzSM%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/EGO36t7pzBWp.png?Signature=txW6IP9KJ8bB0S%2B9QCYQTEy6Q%2BQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
</div>

  • enlace a código en vivo, o se puede compartir el trabajo de violín ?
  • Hay un montón de otras cosas irrelevantes en la misma página, voy a tratar de preparar una versión mínima mantenga en
  • Hecho, actualizado OP, este código produce el mismo efecto, la única diferencia es la página completa en lugar de sólo en el interior de un bootstrap col. No parece haber ninguna diferencia con o w/o el img height y width
  • si agrega margin:0 auto a su etiqueta img en CSS, que alinea las imágenes en el medio de forma automática.
InformationsquelleAutor dvtan | 2016-01-08

2 Comentarios

  1. 10

    JS:

    $(document).ready(function() {
      $('.sc').slick({
        dots: true,
        speed: 150,
        centerMode: true
      });
    });

    CSS:

    .sc img {
      height: calc(50vh - 100px);
      width: auto;
      margin: 0 auto; /* it centers any block level element */
    }

    HTML:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
    <div class="sc">
      <div>
        <img src="https://lespider-ca.s3.amazonaws.com:443/I152rUr6ZBih.png?Signature=YFF9BB8dlAe7okzBHnRLWgYmFI8%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674">
      </div>
      <div>
        <img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
      </div>
      <div>
        <img src="https://lespider-ca.s3.amazonaws.com:443/A6CZ5y6EUmNg.png?Signature=bsArQ0sX8o9mtgIISwtFPW2hzSM%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
      </div>
      <div>
        <img src="https://lespider-ca.s3.amazonaws.com:443/EGO36t7pzBWp.png?Signature=txW6IP9KJ8bB0S%2B9QCYQTEy6Q%2BQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
      </div>
    </div>

    • Funciona! Gracias 🙂 ¿sabía usted que, ¿hay alguna manera de que yo pueda he encontrado por mi cuenta de google docs, etc.? Me refiero a la slick.js docs no tiene ningún css en allí, pero esto parece ser una característica fundamental que un montón de gente que uso…
    • sus fundamentos de CSS! yo sólo lo intentó en el navegador, se trabajó
    • Ah yo en realidad nunca se sentó y se enteró de CSS lol, el aprendizaje como me va 🙂 Una última pregunta, en 0 auto, lo que hace el 0 hacer? edit: lo siento, me acabo de enterar de lo de la otra pregunta lol, Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.
    • aún tengo que aprender no nada, todo está en el ir ! 🙂 margin:0 auto – es igual a : margin:0 auto 0 auto;, se puede leer como: margin: top right bottom left y en taquigrafía: margin: topbottom leftright;
    • Eso tiene mucho más sentido que la otra respuesta. Pero solo un pequeño detalle, acabo de comprobar W3S y ellos dicen que la orden es de arriba-derecha-abajo-izquierda? w3schools.com/css/css_margin.asp edit: Uy ya veo lo que quieres decir en la última parte ahora, lo tengo! Gracias!
  2. 9

    El problema viene del hecho de que cada individuo de la diapositiva es un div que automáticamente se extiende por el ancho de la cinta, pero las imágenes no llene los divs completamente y, por defecto, son a la izquierda alinear dentro de sus contenedores. Trate de añadir algo como esto a su estilos:

    .sc div { text-align: center; }
    .sc img { margin: auto; }
    • Ah, ok, Así que básicamente la margin: auto da la imagen márgenes izquierdo y derecho de manera uniforme hacia el centro interior que dijo div, ¿es correcto?
    • aquí, margin:auto significa, margin: auto auto auto auto; se aplica auto valor para todas las partes.

Dejar respuesta

Please enter your comment!
Please enter your name here