Come aggiungere spazi tra il carosello di Slick elemento

Question

Desidero aggiungere spazio tra due elementi carosello slick, ma non voglio lo spazio con padding, perché sta riducendo la mia dimensione dell'elemento (e non lo voglio).

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

In qualche modo io sono sempre lo spazio da entrambi i lati, sto cercando di rimuovere questo.

Answer 1

Sì, ho trovato la soluzione per il problema.

• Creare una scatola slider con larghezza supplementare da entrambi i lati (che possiamo utilizzare per aggiungere lo spazio degli elementi da entrambi i lati).
• Creare interno Articolo Contenuto con larghezza adeguata & margine da entrambi i lati (Questo dovrebbe essere la vostra dimensione reale involucro)
• Fatto

Answer 2

Provare a utilizzare le classi pseudo come: first-child &: last-child per rimuovere il riempimento extra dal primo & ultimo figlio.

Controllare il codice generato del cursore slick & provare a rimuovere il riempimento su quello.

Spero, sarà d'aiuto !!!

Answer 3

Con l'aiuto delle pseudo classi sono stati rimossi i margini dal primo e dall'ultimo figlio e utilizzato lo script adaptive height true. Prova questo fiddle

Un altro Demo

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

Answer 4

Se si desidera uno spazio più grande tra le diapositive + non per diminuire la larghezza della diapositiva, significa che dovrete mostrare meno diapositive. In tal caso è sufficiente aggiungere un'impostazione per mostrare meno vetrini

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

Un'altra opzione è quella di definire la larghezza di una diapositiva css senza impostare quantità di diapositive da mostrare.

Answer 5

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

Questo problema segnalato come numero (# 582) su di plugin di github, btw questa soluzione menzionata anche qui, (https://github.com/kenwheeler/slick/issues/582)

Answer 6

Ad esempio: Aggiungi questo dato-attr al tuo primario slick div: 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

@Dishan La risposta di TD funziona bene, ma sto ottenendo risultati migliori utilizzando solo margin-left.

E per rendere più chiaro a tutti gli altri, si deve prestare attenzione ai due omologhi: 27 e -27

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

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

Answer 8

Aggiungi

centerPadding: '0' 

impostazioni Slider sarà simile:

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

Grazie

Answer 9

Dal momento che le versioni più recenti si può semplicemente aggiungere al vostro margin slided:

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

Non c'è bisogno di alcun tipo di margine negativo di, dal momento che il calcolo della chiazza di petrolio si basa sugli elementi outterHeight.