jquery - imagenes - slick slider vertical

Cómo agregar espacios entre el elemento de carrusel de Slick

Question

Quiero agregar espacio entre dos elementos del carrusel resbaladizo, pero no quiero el espacio con relleno, porque está reduciendo el tamaño de mi elemento (y no quiero eso).

    $(''.single-item'').slick({
        initialSlide: 3,
        infinite: false
    });

.slick-slider {
    margin:0 -15px;
}
.slick-slide {
    padding:10px;
    background-color:red;
    text-align:center;
    margin-right:15px;
    margin-left:15px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-12" style="background-color:gray;">
            <div class="slider single-item" style="background:yellow">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </div>
</div>

De alguna manera estoy obteniendo espacio de ambos lados, estoy tratando de eliminar eso.

Answer 1

Añadir

centerPadding: ''0''

La configuración del control deslizante se verá así:

$(''.phase-slider-one'').slick({
     centerMode: true,
     centerPadding: ''0'',
     responsive: [{breakpoint: 1024,},{breakpoint: 600,},{breakpoint: 480,}]
});

Gracias

Answer 2

Con la ayuda de las pseudo clases, se eliminaron los márgenes del primer hijo y del último, y se usó la altura adaptativa verdadera en el script. Prueba este fiddle

Una Demo mas

 $(''.single-item'').slick({
        initialSlide: 3,
        infinite: false,
        adaptiveHeight: true
    });

Answer 3

Desde las últimas versiones, simplemente puede agregar margin a su diapositiva:

.slick-slide {
  margin: 0 20px;
}

No hay necesidad de ningún tipo de margen negativo, ya que el cálculo de outterHeight se basa en los elementos outterHeight .

Answer 4

El slick-slide tiene un div de envoltorio interno que puede usar para crear espacios entre las diapositivas sin romper el diseño:

.slick-list {margin: 0 -5px;}
.slick-slide>div {padding: 0 5px;}

Answer 5

La respuesta de @Dishan TD funciona bien, pero estoy obteniendo mejores resultados usando solo el margen izquierdo.

Y para aclarar esto a todos los demás, debe prestar atención a los dos números opuestos: 27 y -27

  /* the slides */
  .slick-slide {
    margin-left:27px;
  }

  /* the parent */
  .slick-list {
    margin-left:-27px;
  }

Answer 6

Por ejemplo: agregue este atributo de datos a su div slick principal: data-space = "7"

                    $(''[data-space]'').each(function () {
                        var $this = $(this),
                            $space = $this.attr(''data-space'');

                        $(''.slick-slide'').css({
                            marginLeft: $space + ''px'',
                            marginRight: $space + ''px''
                        });

                        $(''.slick-list'').css({
                            marginLeft: -$space + ''px'',
                            marginRight: -$space/2 + ''px''
                        })
                    });

Answer 7

Sí, he encontrado la solución para este problema.

• Cree un cuadro de control deslizante con ancho adicional desde ambos lados (que podemos usar para agregar espacio de elementos desde ambos lados).
• Cree contenido interno del artículo con el ancho y el margen adecuados desde ambos lados (este debe ser el tamaño real de su envoltorio)
• Hecho

Answer 8

Si desea un espacio más grande entre las diapositivas + para no disminuir el ancho de la diapositiva, significa que tendrá que mostrar menos diapositivas. En tal caso, simplemente agregue una configuración para mostrar menos diapositivas

    $(''.single-item'').slick({
      initialSlide: 3,
      infinite: false,
      slidesToShow: 3
    });

Otra opción es definir el ancho de una diapositiva mediante css sin configurar la cantidad de diapositivas para mostrar.

Answer 9

Solo arregla css:

/* the slides */
.slick-slider {
    overflow: hidden;
}
/* the parent */
.slick-list {
    margin: 0 -9px;
}
/* item */  
.item{
    padding: 0 9px;
}

Answer 10

Trate de usar clases de pseudo como: first-child &: last-child para eliminar el relleno adicional de first y last child.

Inspeccione el código generado del control deslizante slick y trate de eliminar el relleno en eso.

Espero que te ayude !!!

Answer 11

    /* the slides */
  .slick-slide {
    margin: 0 27px;
  }
  /* the parent */
  .slick-list {
    margin: 0 -27px;
  }

Este problema reportado como problema (# 582) en github del plugin, por cierto esta solución también se menciona allí, ( https://github.com/kenwheeler/slick/issues/582 )