サムネイル画像でスクロールしてソートするにはどうすればよいですか？

Question

友達が私に送ったたくさんの写真から、簡単な横スクロールを作成する必要があります。私はこれを達成するために私が使用する必要があると思うようにjavascriptで実際にはあまり働かないが、もっと実行可能なオプションがあるかどうか最初にここで質問したかった。写真のサムネイルがそれぞれの側の矢印は写真をシフトオレンジ色のグラデーションボックスに赤で並んで表示されます

れる：ここで彼は必要なもののシェルPICがあります。上部の並べ替えは、写真が左から右に配置される方法を変更する必要があります。

私はこれを作成する方法をステップバイステップで探していません。私はこれを達成するためにどのようにすべきかアドバイスを求めています。一番簡単な方法がjQueryUIかもしれないと仮定していますが、あなたのアドバイスが欲しかったです - おそらくHTML 5でも実行可能でしょうか？ありがとう！

Answer 1

、コンテンツが現在表示可能であるものをシフトするために周りに移動することができ、子要素を追加し、あなたのスライダーの可視ポーションになりたいサイズであるコンテナ要素を作成します。ここでは

<style> 
#container { 
    position : relative;/*necessary so its child can be positioned absolutely*/ 
    width : 500px; 
    height : 200px; 
    overflow : hidden; 
} 
#container ul { 
    position : absolute; 
    top  : 0; 
    left  : 0; 
    list-style : none; 
    width  : <total number of LI elements times their width, so eight LI elements would be 800>px 
} 
#container li { 
    width : 100px; 
    float : left; 
} 
</style> 

<div id="container"> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
     ... 
    </ul> 
</div> 

<script> 
$(function() { 
    $('#left-nav-button').on('click', function() { 
     //use `.animate()` or `.css()` to move the UL element to the left (Hint: negative `left` value) 
    }); 
    $('#right-nav-button').on('click', function() { 
     //use `.animate()` or `.css()` to move the UL element to the right 
    }); 
}); 
</script> 

ですjsfiddleのシンプルなデモ：jCarouselのようなものがうまくいくかもしれません：http://jsfiddle.net/qML6L/

Answer 2

並べ替えに関しては、これをjQuery Isotopeでうまく実行できます。私はあなたがちょうど非常に狭いdivに画像を置き、fitRowsレイアウトモードを使用することができると思います。

滑りについては、serialScrollが機能しますが、jCarouselのようなものもオプションになります。

Answer 3