0

目标：有一个能够滑动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; to .element 但结果很奇怪...现在元素之间有一个间隙，但是几圈后元素本身并没有正确显示。（例如：http ://cl.ly/image/3J0O2e360N1m ）

所以我的问题是：如何为滑块中的元素正确添加边距/填充（无论如何）？我不确定这个问题是 CSS 还是 JS 相关，但我希望有人知道解决方案。

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

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

4

2 回答 2

1

没有边距，没有填充。你想在 bxSlider 中的元素之间有一个间隙——为你的 DIV/li（你的“滑动元素”）等添加额外的宽度。

就我而言

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

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

于 2012-10-06T11:15:15.417 回答
0

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

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

并为您的图像添加填充权

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

稍微摆弄一下，我想你可以让它看起来像你想要的那样。

于 2012-10-05T20:40:40.930 回答