如何在 Slick 轮播项目之间添加空格
我想在两个光滑的轮播项目之间添加空间,但不希望有填充的空间,因为它会减小我的元素大小(我不希望这样).
I want to add space between two slick carousel items, but not want the space with padding, because it's reducing my element size(and I don't want that).
$('.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>
不知何故,我从两侧获得了空间,我正在尝试删除它.
Somehow I am getting space from both side, I am trying to remove that.
推荐答案
是的,我找到了dis问题的解决方案.
Yup, I have found the solution for dis issue.
- 从两侧创建一个额外宽度的滑块(我们可以使用它从两侧添加项目空间).
- 创建具有适当宽度的Inner Item Content两边的边距(这应该是你的实际包装尺寸)
- 完成
- Create one slider box with extra width from both side( Which we can use to add item space from both sides ).
- Create Inner Item Content with proper width & margin from both sides( This should be your actual wrapper size )
- Done
相关文章