jquery - jQueryスライダーオーバーフローの可視性

Question

「ユーザーカード」を表示するjQueryスライダーがあります。現在の実装には、すべてのユーザーカードを含むdivの全幅を表示する水平方向のドラッグ可能なスクロールバーがあります。私が欲しいのは、ユーザーが前のカードの一部と次のカードの同じ部分を見ることができるdivです（画像の添付ファイルを参照）。ジャンプするアニメーションをスライドすると、次のカードの同じ部分で目的のカードが表示されます以前のカード-アニメーションは処理できますが、添付画像の視覚効果を実現する方法に困惑しました。どんな助けでも大歓迎です。

Answer 1

ユーザーが前のカードの一部と次のカードの同じ部分を表示できるようにする部分のフィドルを作成しました。スライダーとアニメーションロジックを追加できます。

http://jsfiddle.net/q4Yjh/

HTML

<div id="slider">
<div id="vcards">
    <div class="vcard">1</div>
    <div class="vcard">2</div>
    <div class="vcard">3</div>
    <div class="vcard">4</div>
    <div class="vcard">5</div>
</div>
</div>
<div id="next">Next</div>

CSS

#slider{
width:200px;
overflow:hidden;//remove overflow to see the actual logic
position:relative;
border:1px solid black;
height:100px;
}  

.vcard{
width:100px;
margin: 0 10px;
background-color:red;
height:100px;
float:left;
border:1px solid yellow;
}  

#vcards{
position:absolute;
top:0;
left:40px;
} 

JQUERY

$('#vcards').width(function(){
    var width = 0;                
    $('.vcard').each(function(){
        width += $(this).outerWidth(true);
    });
    return width;
}());
//set the width to contain all vcards 
//in a single horizontal strip
$('#next').on('click',function(){
    $('#vcards').animate({left : "-=122"});
    });

Answer 2

jquery サイクルのようなスライダーを使用する必要があります。次に、これらの要素を含む div を作成し、余分な要素を非表示にする必要があります。これにより、オーバーフローが非表示になるため、カードの一部のみを表示できます。

<div class="wrapper" style="width:1200px; overflow: hidden">
  <div class="slider">
    <img class="img-1" src="" />
  </div>

  <div class="slider">
    <img class="img-2" src="" />
  </div>
</div>

Answer 3

「カード」を保持するコンテンツ要素 (div など) は、すべてのカード要素を保持するのに十分な幅があります。ビューポートは、固定幅になります。content 要素は viewport 要素内にネストされ、ある種の戻る/進むボタン要素に応じて絶対位置が変更されます。

スクロール可能なプラグインを備えた優れた jquery Tools ライブラリを含め、この種のことを行う jquery プラグインはいくつもあります。