jquery - 如何正确地为 bxSlider 中的元素添加边距

Question

目标:有一个能够滑动 DIV 的 slider ，元素之间必须有间隙。

问题:我有 6 张幻灯片(DIV)，它们应该是这样的:http://cl.ly/image/3t2Q0w1N350y (这不是一个非常准确的示例，因为左侧幻灯片中的图像被剪切了大约 15 个像素。但我希望它能让您了解需要实现的目标。)

我使用来自 bxslider 网站示例页面的代码:

$(function(){
 $('#slider1').bxSlider({
displaySlideQty: 3,
moveSlideQty: 1,
prevText: "",
prevSelector: '#backar',
prevImage: '/img/siteicons/slider-left-arrow.png',
nextText: "",
nextSelector: '#forwar',
nextImage: '/img/siteicons/slider-right-arrow.png'
 });
});

正如我所说，幻灯片需要在元素之间留有间隙，所以我添加了 margin-right: 20px;到.element 但结果很奇怪…… 现在元素之间有一个间隙，但元素本身在几圈后显示不正确。 (例如:http://cl.ly/image/3J0O2e360N1m)

所以我的问题是:如何正确地向 slider 中的元素添加边距/填充(无论什么)？我不确定这个问题是 CSS 还是 JS 相关，但我希望有人知道解决方案。

我尝试了不同的边距/填充，我还尝试添加固定数字而不是 getWrapperWidth();到 bxSlider 代码中的 wrapperWidth =。但没有运气。

我的测试页面:http://restop.cutepictures.ru/htmlmockup/test.html

Answer 1

没有边距，没有填充。您想在 bxSlider 中的元素之间留出间隙——为您的 DIV/li(您的“滑动元素”)等添加额外的宽度。

以我为例

.element{
float: left;
width: 225px;
max-width: 225px;
max-height: 210px;
}

顺便说一句，我还在 slider js 中将固定宽度设置为 wrapperWidth