如何在simplyScroll中實現不等寬的圖像元素？

我使用simplyScroll v1水平滾動不同寬度的圖像，但包含圖像的列表項具有固定寬度。您可以查看滾動內容here。如何在simplyScroll中實現不等寬的圖像元素？

如何實現寬度變化的列表項？

筆者提出以下建議：

如果你想滾動大小不等元素儘量把他們放在一個 div容器，然後在該初始化 simplyScroll（注意，這黑客基本上會翻倍量滾動元素）

名單似乎已經是一個div容器內：

div.simply-scroll-container

作者在容器div上的「初始化」是什麼意思？

類似的線程存在here儘管它對我來說很模糊。任何幫助是極大的讚賞。

來源

2011-04-11 Dominor Novus

李的寬度設置在簡單地滾動css文件，所以如果你想使用不同的大小，你可以簡單地刪除width屬性：

前： .simply-scroll .simply-scroll-list li { float: left; /*width: 290px;*/ width: 290px; /*height: 200px;*/ height: 180px; }

後： .simply-scroll .simply-scroll-list li { float: left; /*height: 200px;*/ height: 180px; }

來源

2011-04-11 14:55:18

沒有運氣史蒂夫。 Chrome中沒有顯示任何圖像。在FireFox中，其中一個圖像垂直堆疊在第一個圖像下面。如果它如此簡單，我相信作者不會提供我在我的問題中引用的「黑客」。我無法弄清楚爲什麼，但滾動似乎取決於列表項目的寬度。 – 2011-04-11 15:30:10

這是一個常見問題，即版本2（即將推出！）通過自動包裝要嘗試滾動的元素進行修復。現在手動做。

如果你有不平等的寬度/高度的元素此列表

<ul id="scroller"> <li></li> <li></li> etc... </ul>

敷在另一個DIV，所以你只是一個滾動。

<div id="scroller"><ul> <li></li> <li></li> etc... </ul> </div>

來源

2011-09-09 10:26:03 Logicbox

我得到這個組合都已經提供了答案的工作;

包裹<ul>到自己<div id="scroller">
取下.simply-scroll .simply-scroll-list li元素固定width財產在CSS
添加padding該元素的要求。

在Firefox，Chrome和IE中工作。

來源

2013-03-14 16:29:56

我不知道它是否對你有幫助。自問題寫完2年以來。

它是內部裏爲每個圖像的不同寬度的溶液

$(window).load(function() { 
    $('#scroller li img').each(function(){ 
     var widthThis = $(this).width(); 

     $(this).parent().css({ 
     width : widthThis 
     }) 
    }); 
$("#scroller").simplyScroll({ 
    pauseOnHover: false 
});

}）;

來源

2014-01-23 18:42:45

如何在simplyScroll中實現不等寬的圖像元素？

回答

相關問題