So fügen Sie Leerzeichen zwischen Slick-Karussellelementen hinzu

Ich möchte Platz zwischen zwei glatten Karussellelementen hinzufügen, möchte aber keinen Platz mit Polsterung, da dies meine Elementgröße verringert (und das möchte ich nicht).

    $('.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>

Irgendwie bekomme ich von beiden Seiten Platz, das versuche ich zu entfernen.

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

Dieses Problem wurde als Issue (#582) auf Github des Plugins gemeldet, übrigens wird diese Lösung dort auch erwähnt (https://github.com/kenwheeler/slick/issues/582)

Die Slick-Folie hat ein inneres Wrapping-Div, mit dem Sie einen Abstand zwischen den Folien erstellen können, ohne das Design zu beschädigen:

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

Seit den neusten Versionen kann man einfach eine hinzufügen margin zu deinen Folien:

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

Es sind keinerlei negative Margen erforderlich, da die Berechnung von Slick auf den Elementen basiert outerHeight.

Die Antwort von @Dishan TD funktioniert gut, aber ich erhalte bessere Ergebnisse, wenn ich nur den linken Rand verwende.

Und um dies allen anderen klarer zu machen, müssen Sie auf die beiden entgegengesetzten Zahlen achten: 27 und -27

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

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

Eine Verbesserung basierend auf dem Beitrag von Dishan TD (der auch den vertikalen Rand entfernt):

  .slick-slide{
    margin-left:  15px;
    margin-right:  15px;
  }

  .slick-list {
    margin-left: -15px;
    margin-right: -15px;
    pointer-events: none;
  }

Hinweis: Die Pointer-Events waren in meinem Fall notwendig, um auf den linken Pfeil klicken zu können.

Ja, ich habe die Lösung für dieses Problem gefunden.

• Erstellen eine Schieberbox mit Überbreite von beiden Seiten (was wir verwenden können, um Platz für Gegenstände von beiden Seiten hinzuzufügen).
• Erstellen Innerer Gegenstandsinhalt mit der richtigen Breite und dem richtigen Rand von beiden Seiten (Dies sollte Ihre tatsächliche Wrapper-Größe sein)
• Fertig

Einfach CSS reparieren:

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