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），並找出最佳寬度％來使用。

不過我建議在與數學搞亂重新調整您的圖片，只是因爲這將讓你最快的結果，你可以繼續前進，回來這以後，如果你在你的開發週期時間。