5

I am using Elastislide for an image slider for a site I'm working on (http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/).

Love the plug in and it works well in this responsive site (I've modified it to only slide one image at a time based on this answer: elastislide move one at a time), however I would also like to modify the JS so that it works with images of varying widths.

Currently itemSpace is calculated according to the first image width, and this works fine if all the images are the same size. But as soon as you chuck in a bunch of images all with different widths, then the maths is wrong and it slides to the wrong positions.

I've tried playing with different things in the JS and I just can't get it working.

Any suggestions would be appreciated, thanks!

4

1 回答 1

1

您遇到的问题是插件将始终采用第一张图像并为其使用默认高度/宽度。

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

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

  2. 艰难的道路 因为 _setItemsSize : function() （在 js/jquery.elastislide.js 中）是设置数学的代码所在，您可以在此处修改它。然而，这段代码只会被命中一次，来自构造函数中的 self.layout() ($.Elastislide.prototype = {)。如果您打算这样做，那么您需要修改 setItemsSize 中的 (w) 并计算出要使用的最佳宽度 %。

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

于 2015-04-08T07:28:30.997 回答