Elastislide - 如何使其适用于不同的图像宽度

Question

我正在使用Elastislide作为我正在处理的网站（http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/）的图片滑块。

喜欢插件，它在这个响应式网站中运行良好（我已将其修改为仅根据此答案一次滑动一个图像：elastislide move one at a time），但我还想修改JS这样它可以处理不同宽度的图像。

目前，itemSpace是根据第一个图像宽度计算的，如果所有图像的大小相同，则可以正常工作。但是只要你把一堆都有不同宽度的图像放进去，那么数学就错了，它会滑到错误的位置。

我尝试在JS中玩不同的东西，但我无法让它发挥作用。

任何建议都将不胜感激，谢谢！

Answer 1

您遇到的问题是插件将始终拍摄第一张图片并使用默认的高度/宽度。

有两种方法可以解决这个问题。

1. 简单方法 您可以将所有图像重新调整为相同大小（无论是手动还是PHP / C＃）。

2. 艰难的道路 由于_setItemsSize：function（）（在js / jquery.elastislide.js中）是设置数学的代码所在，因此您可以在此处对其进行修改。但是，此代码只会被构造函数中的self.layout（）命中一次（$ .Elastislide.prototype = {）。 如果您打算这样做，那么您需要修改setItemsSize中的（w）并计算出要使用的最佳宽度％。

但是我会建议重新调整你的图像而不是弄乱数学，只是因为这样可以获得最快的结果，如果你在开发周期中有时间，你可以继续前进并回到这里。