Slickスライダ：表示されている画像の間にスペースを追加する

Question

たぶん私はばかげているかもしれませんが、これは簡単なことですが、滑らかなスライダを使って表示された画像の間にスペーシングを加えようとしています。

JS

$('.slider').slick({ 
    infinite: true, 
    speed: 700, 
    arrows: true, 
    slidesToShow: 2, 
    slidesToScroll: 2, 
    dots: false, 
    responsive: [ { settings: "unslick" ## Heading ##}, ] 
}); 

とCSSでスペースを追加することで、私の試み：それは非常に高く評価されるだろうことができます誰もがある場合は

.slick-slide { 
    &:nth-of-type(odd){ 
     padding-left:0px; 
     padding-right:100px; 
    } 
    &:nth-of-type(even){ 
     padding-right:0px; 
     padding-left:100px; 
    } 
} 

！前もって感謝します！

Answer 1

.slick-slideセレクタに直接プロパティを適用する代わりに、子要素に適用することをお勧めします。例えば

HTMLコードは、

<div class="slider"> 
    <div><h3>1</h3></div> 
    <div><h3>2</h3></div> 
    <div><h3>3</h3></div> 
</div> 

である場合、SASSは、ここでmarginが所要間隔を引き起こしていること

.slick-slide { 
    h3{ 
    background: red; 
    color: white; 
    font-size: 36px; 
    line-height: 100px; 
    margin: 10px; 
    padding: 2%; 
    position: relative; 
    text-align: center; 
    } 
} 

注意すべきです。 codepenあなたが理解しやすいように作成しました。