Javascript Elastislide滑块在滑动时跳过许多li（垂直旋转木马）

我正在设计Elastislide，我注意到它跳过了很多li或是我在幻灯片中的评论

我在标题中添加了数字，它将从3跳到8

4 5 6 7将不会显示

这里有一个例子

2017/5/32
小巧、便携且功能齐全1
纤细的瓶子，非常适合我的
手提包买了一个带可折叠漏斗的A6瓶子
便于倒水。购买是物有所值的。
Brian A

---

如何解决此问题

您试图改变的方式无法解决此问题。最重要的是，该回购协议似乎已被放弃，因为2015年以来存在回购协议所有人一次也没有解决的问题

不管怎样，要想以您尝试的方式更改它，您首先需要了解脚本实际上在做什么。如果您必须在

li

中添加自定义HTML，并使用滑块，则需要查看它如何分配

最大宽度和
宽度，而不是试图在css中强制覆盖它

查看
jquery.elastislide.js
它所做的是在函数中为items/lis分配
max width
，它使用
imgSize
对象的属性
width
将
max width
css属性分配给items

this.$items.css({
    'width': w + '%',
    'max-width': this.imgSize.width,
    'max-height': this.imgSize.height
});

现在，如果回溯，您会发现此
imgSize
对象实际上是保存在函数内部的原始图像大小（
width
，
height
）

var $img = this.$items.find('img:first');
this.imgSize = {
    width: $img.outerWidth(true),
    height: $img.outerHeight(true)
};

当加载所有图像时，在函数内部调用backtrack

这表明li大小始终取决于第一个li内的第一个图像大小，因为它使用
$img.outerWidth（true），
和
true
，这意味着它将获得匹配元素集中第一个元素的当前计算外部宽度（包括填充、边框和可选边距），但它将分配与其中图像相同的维度，也将分配第一个
li
。它会获取所有li和其中的第一个图像，但仅使用第一个li的图像维度来指定给所有项目/li

现在你的做法完全不同了，你在锚点中添加嵌套的HTML，图像的大小更小，所以实际上，你是在强制布局显示你想要的宽度，但是插件javascript使用与上面定义的相同的逻辑来计算尺寸，从而滑动lis的数量

你有两个选择


更改源代码中的逻辑（我不打算这样做，因为这需要很多时间，也许不是。）

愚弄滑球


如何愚弄滑块是，您可以通过提供一个空白图像来欺骗滑块，该图像带有
显示：none
，其中包含您希望滑块或
li
平铺的实际尺寸，它将自动获取尺寸并相应地移动和计算滑块平铺

我已经创建并上传了一张空白图像，这样你就可以下载一张使用它的图片了。根据你的CSS设置，我创建了它
290x161
。如果要更改互动程序的大小并进行相应调整，可以对其进行修改

请看下面的演示，我只在第一张幻灯片中添加了一张空白图像，现在您的所有幻灯片都将正确滑动。以完整模式运行演示

希望这有帮助，这就是我所能做的，其余的你应该自己做，如果你想跳过幻灯片或做其他事情，你应该先深入代码然后实现


$（“#旋转木马”）.elastislide({
方向：“水平”，
//滑动速度
速度：1000，
//滑动缓和
放松：“放松进入”，
//要显示的最小项目数。
//当我们调整窗口大小时，这将确保始终显示最小项
//（当然，除非最小项高于元素总数）
最小项：5，
//当前项目的索引（旋转木马最左侧的项目）
起点：0，
});
.slider\u容器{
/*最大宽度：1250px*/
字体系列：“Lato”、Calibri、Arial、无衬线字体；
字体大小：300；
字体大小：15px；
颜色：#333；
-webkit字体平滑：抗锯齿；
文本阴影：0 1px 0 rgba（255、255、255、0.8）；
}
#旋转木马{
最大高度：145px！重要；
}
#旋转木马李{
最大宽度：290px！重要；
最大高度：161px！重要；
}
#旋转木马{
字体大小：15px；
}
#旋转木马.滑动器{
宽度：100%；
空白：正常！重要；
颜色：#2b2b；
显示：内联块；
高度：87px；
垫底：20px；
右边填充：0；
垂直对齐：顶部；
字体大小：13px；
文本对齐：左对齐；
}
#旋转木马.滑块\标题{
字体大小：粗体；
利润底部：3倍；
字体大小：13px；
宽度：自动；
线高：21px；
边缘顶部：2倍；
}
#旋转木马.滑块\u用户名\u{
边缘顶部：6px；
字体大小：粗体；
位置：相对位置；
顶部：-12px；
字体大小：13px；
}
#旋转木马{
颜色：#555；
文字装饰：无；
}
#旋转木马.上滑块{
位置：相对位置；
顶部：-2px；
}
#旋转木马.滑动条\日期{
浮动：对；
右边距：15px；
字体大小：10px；
利润上限：3倍；
}
.U图像{
显示：内联块！重要；
浮动：左；
高度：80px；
宽度：80px；
右边距：10px；
垂直对齐：顶部；
文本对齐：居中；
位置：相对位置；
z指数：9；
边框：1px实心#ddd！重要；
填充：3倍；
边界半径：5px；
背景：白色；
}
.滑块上部分{
边缘底部：7px；
}
.滑块(上)星{
浮动：对；
右边距：30px；
}
.滑块\u上\u标题{
字体大小：粗体；
左边距：15px；
}

什么
var $img = this.$items.find('img:first');
this.imgSize = {
    width: $img.outerWidth(true),
    height: $img.outerHeight(true)
};