十分な画像があれば、私のコードは正常に動作します。スクロールして、すべて問題ありません。
ただし、イメージの結合された幅が親 div の幅よりも小さい場合、スクロールは行われず (想定どおり)、すべてのイメージが左に揃えられます。
それらを中央に揃えるにはどうすればよいですか?
これは簡単なことだと確信していますが、解決策が見つかりません。
誰かが助けてくれれば幸いです。
ありがとうカイ
このプラグイン用です: http://www.smoothdivscroll.com/
私のCSSは次のようになります
#makeMeScrollable
{
width:100%;
height: 55px;
position: relative;
margin: 20px 0;
}
#makeMeScrollable div.scrollableArea img, #makeMeScrollable div.scrollableArea a
{
position: relative;
float: left;
margin: 0 10px;
padding: 0;
filter: url(stylesheets/filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
/* If you don't want the images in the scroller to be selectable, try the following
block of code. It's just a nice feature that prevent the images from
accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#makeMeScrollable div.scrollableArea img:hover, #makeMeScrollable div.scrollableArea a:hover
{
filter: none;
-webkit-filter: grayscale(0);
}
そしてhtmlは次のとおりです。
<div id = "makeMeScrollable">
<img src = "images/test.png"
id = "1" />
<img src = "images/test2.png"
id = "2" />
</div>