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），并找出最佳宽度％来使用。

不过我建议在与数学搞乱重新调整您的图片，只是因为这将让你最快的结果，你可以继续前进，回来这以后，如果你在你的开发周期时间。