admin管理员组文章数量:1328750
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!
Share Improve this question edited Jul 8, 2017 at 14:46 dsaket 1,8962 gold badges20 silver badges30 bronze badges asked Jul 6, 2017 at 15:31 emmacoldemmacold 251 gold badge1 silver badge4 bronze badges 1- 1 Please format your code properly. – Den Isahac Commented Jul 6, 2017 at 15:32
2 Answers
Reset to default 3Instead 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
版权声明:本文标题:javascript - Slick slider: adding space in between images shown - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742247364a2440102.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论