如何在光滑旋转木马项目

之间添加空格我想在两个光滑的旋转木马项目之间添加空间，但不希望使用填充空格，因为它减少了我的元素大小（我不希望这样）。如何在光滑旋转木马项目

enter image description here

$('.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>

不知怎的，我从两侧得到的空间，我想删除。

来源

2015-06-23 Sopo

您需要添加或删除两端的空间。 – stanze

如图所示。我想从第一个项目右边的空间到右侧图像的左侧，而不是开始和结束点 – Sopo

您是否稍后获得解决方案？我也面临同样的问题。 – aslamdoctor

是的，我找到了dis问题的解决方案。

创建一个从两侧特宽幅（我们可以用它来从两侧添加项空间）滑块框。
创建内蒙古项目内容与适当的宽度从两侧&保证金（这应该是你实际的包装大小）
对插件的完成

来源

2015-07-13 12:35:30 Sopo

向我们显示代码。 – Philip

尝试使用伪类，如：第一个孩子&：最后一个孩子从第一个孩子中删除额外的填充&。

检查生成的滑动滑块代码&尝试删除填充。

希望它能帮助!!!

来源

2015-06-23 09:51:28

我已经试过，但它会影响下一个项目滚动 – Sopo

在伪类的帮助下，删除了第一个和最后一个孩子的页边距，并在脚本中使用了adaptive height true。试试这个fiddle

还有一个Demo

$('.single-item').slick({ 
     initialSlide: 3, 
     infinite: false, 
     adaptiveHeight: true 
    });

来源

2015-06-23 10:14:12 stanze

我已检查你的两个小提琴，当我更改为下一个项目时，它显示第一个和第二个空间。其实我试图去除可视区域上的空间（空白空间），并将可见部分的全部宽度用于单个项目 – Sopo

这是正确的答案。自适应宽度和高度有助于解决我的问题。 – Danny

如果你想在幻灯片+之间的更大的空间不降低幻灯片的宽度，这意味着你必须表现出较少的幻灯片。在这种情况下只需要添加的设置以显示较低的幻灯片

$('.single-item').slick({ 
     initialSlide: 3, 
     infinite: false, 
     slidesToShow: 3 
    });

另一种选择是通过CSS没有设置为等于幻灯片显示的来定义幻灯片的宽度。

来源

2015-06-23 21:31:23

/* the slides */ 
    .slick-slide { 
    margin: 0 27px; 
    } 
    /* the parent */ 
    .slick-list { 
    margin: 0 -27px; 
    }

这个问题报告为问题（＃582） github，顺便说一句这个解决方案在那里也提到了，（https://github.com/kenwheeler/slick/issues/582）

来源

2015-07-26 10:23:52

不适用于我。 – SISYN

这应该是公认的。 – Philip

此解决方案非常好，并且可以正常工作。（顺便说一下，这个解决方案也在插件的github配置文件中提到，请参阅https://github.com/kenwheeler/slick/issues/582） –

例如：添加此数据attr到您的主要slick div：data-space =“7”

    $('[data-space]').each(function() { 
         var $this = $(this), 
          $space = $this.attr('data-space'); 

         $('.slick-slide').css({ 
          marginLeft: $space + 'px', 
          marginRight: $space + 'px' 
         }); 

         $('.slick-list').css({ 
          marginLeft: -$space + 'px', 
          marginRight: -$space/2 + 'px' 
         }) 
        });

来源

2015-09-14 22:08:30 Krzysztof

@Dishan TD的答案很好，但我得到更好的结果只使用了余裕。

而为了让这个更清楚其他人一样，你必须要注意两个相反的数字：27和-27

/* the slides */ 
    .slick-slide { 
    margin-left:27px; 
    } 

    /* the parent */ 
    .slick-list { 
    margin-left:-27px; 
    }

来源

2016-12-12 18:05:04

添加

centerPadding: '0'

滑块设置的样子：

$('.phase-slider-one').slick({ 
    centerMode: true, 
    centerPadding: '0', 
    responsive: [{breakpoint: 1024,},{breakpoint: 600,},{breakpoint: 480,}] 
});

谢谢

来源

2017-01-13 07:15:34

既然你可以简单地添加margin你滑动的最新版本：

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

没有必要对任何种类的切缘阴性的，因为光滑的计算是基于元素outterHeight。

来源

2018-03-07 13:13:47 Orlandster

如何在光滑旋转木马项目

回答

相关问题