jquery - anyslider jquery プラグインでスライド幅を変更する

Question

• 幅100pxのスライダーがあります
  • 中は3枚のスライド（画像）を見せています
  • 画像 #1 と #3 も 100px 幅です
  • 画像 #2 の幅は 200px

私がやりたいことは、ビューポートが 100px のままであることですが、スライド #2 を表示しているときに最初の 100px が表示され、スライドが左に移動するときにスライド #3 がスライドインすると、残りの 100px が表示されますスライド #2

何か案は？

前もって感謝します！！

Answer 1

ここに（少し大きいサイズの）デモを作成しました...

基本的に、次のことを行う必要があります。

パネル オーバーフローを表示に設定し、すべてのスライドを同じサイズに設定します。

#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>

最後に、resizeContentsオプションをfalseプラグインの初期化中に に設定します。そうしないと、1 つのスライド内に収まるように幅の広い画像のサイズが変更されます。

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