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

Question

我正在使用 Elastislide 作为我正在处理的网站的图像 slider (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) 并计算出要使用的最佳宽度 %。

不过，我建议重新调整图像大小而不是搞乱数学，因为这样可以最快获得结果，如果您在开发周期中有时间，您可以继续并稍后再回来。