変更スライド幅

Question

• 私は3枚のスライド（画像）
• 画像＃1と＃3を示すよ内部100pxに幅
  • のスライダーを持っても100pxに幅
  • 画像あり＃2は200pxの幅

私がやりたいことは、ビューポートが100pxにのままということですが、それはスライド＃2を示すだとき、私は最初の100Pが表示されますxスライドが左に移動してスライド＃3がスライドすると、スライド＃2の残りの100ピクセルが表示されます

アイデアはありますか？

ありがとうございます！

Answer 1

私は基本的に、あなたは次の操作を行う必要があります（少し大きめのサイズ）demo for you here ...

を作った：

が見えるまで、パネルのオーバーフローを設定して、あることをスライドのすべてを設定同じサイズ。

#slider .panel { 
    overflow: visible; 
} 
#slider, #slider li { 
    width: 100px; 
    height: 100px; 
} 

さもなければそして（CSSによって設定された）他のスライドと同じ寸法を有することになる空のスライド

<ul id="slider"> 
    <li><img src="http://placekitten.com/100/100" alt="" /></li> 
    <li><img src="http://placehold.it/200x100" alt="" /></li> 
    <li></li> 
    <li><img src="http://placedog.com/100/100" alt="" /></li> 
</ul> 

に追加し、最終的には、プラグインの初期化中にfalseにresizeContentsオプションを設定します余分なワイド画像は、1つのスライドに収まるようにサイズが変更されます。

$('#slider').anythingSlider({ 
    resizeContents: false 
});