javascript - Slick slider: adding space in between images shown - Stack Overflow

admin管理员组

文章数量:1328548

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

Share Improve this question Follow edited Jul 8, 2017 at 14:46 dsaket 1,89622 gold badges2020 silver badges3030 bronze badges asked Jul 6, 2017 at 15:31 emmacoldemmacold 2511 gold badge11 silver badge44 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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;
  }

本文标签： javascriptSlick slider adding space in between images shownStack Overflow