Maybe I am just being ridiculous and this is a simple thing but I am trying to add spacing in between the images shown using slick slider.

The JS

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

And my attempt at adding the space with css:

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

If there is anyone who can help that would be greatly appreciated! Thanks in advance!

Maybe I am just being ridiculous and this is a simple thing but I am trying to add spacing in between the images shown using slick slider.

The JS

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

And my attempt at adding the space with css:

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

If there is anyone who can help that would be greatly appreciated! Thanks in advance!

• javascript
• jquery
• css
• sass

• 1 Please format your code properly. – Den Isahac Commented Jul 6, 2017 at 15:32

2 Answers 2

Instead of applying properties to the .slick-slide selector directly, you should prefer apply them to a child element.

For example, if the HTML code is,

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

then the SASS should be,

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

Note that the margin here is causing the required spacing. Check out the codepen I have created for you to have better understanding.

This should work, because slick start first item on screen with attribute data-slick-index="0" data by 0

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

.slick-list [data-slick-index="0"] {
    margin-left: 0;
  }