如何在 Slick 轮播项目之间添加空格

How add spaces between Slick carousel item(如何在 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="aHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjUvanMvYm9vdHN0cmFwLm1pbi5qcw=="></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="aHR0cDovL2Nkbi5qc2RlbGl2ci5uZXQvanF1ZXJ5LnNsaWNrLzEuNS4wL3NsaWNrLm1pbi5qcw=="></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMS4xMS4wL2pxdWVyeS5taW4uanM="></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

这篇关于如何在 Slick 轮播项目之间添加空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！