Question

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

问题：我有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）

所以我的问题是：如何正确地为滑块中的元素添加边距/填充（无论如何）？我不确定这个问题与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;
}

btw我还将固定宽度设置为滑块js中的wrapperWidth

Answer 2

问题是你的滑块工具正在使用.element div的宽度来确定单击箭头时要滑动的距离。换句话说，摆脱.element div上的margin-right

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

并在图片中添加填充

img {
    border: 0 none;
    padding-right: 10px;
}

有点摆弄，我想你可以看看你想要它。

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

2 个答案: