3

モバイル用のスワイプギャラリーのスニペットに取り組んでいます。あなたはここでそれを見ることができますhttp://codepen.io/piatra/full/Edtlq

[].forEach.call(slides, function(s){
    s.style.width = mainContainer.offsetWidth + 'px';
});

私の問題：コンテンツは複数のパネルで構成されているため、右側の同じ行に配置する必要があります。パネルのサイズは、一度に1つのパネルしか表示されないように、画面の100％にする必要があります。しかし、cssのパネルのサイズを100％に設定することはできません。これは、各パネルが独自の行にプッシュされるためです。

現在、JSでこれを解決して ontouchstartいます。メインの親のサイズを取得し、各スライドをその幅に設定していますが、横向きから縦向きに切り替えるときにギャラリーをタッチして更新する必要があるため、この解決策は好きではありません。変更にイベントリスターを追加しても、それでもかなりの解決策ではありません。

CSSでのみこの効果を達成できますか？親に基づいて幅が変化する同じ行のパネルのギャラリー？

PS：Chrome開発ツール>タッチイベントをエミュレート

PPS：簡略化されたバージョンを書き留めましたhttp://codepen.io/piatra/pen/usaHo このバージョンへの改善は大歓迎です:)

良い例はhttp://csscience.com/sensitiveslidercss3/ですが、新しいパネルを追加するときはCSSを編集する必要があります

4

1 に答える 1

0

特に、ペインを追加するときにcssを変更する必要なく、簡単に保守できるようにしたいので、これは純粋なcssではできないと思います。

1 つの解決策は、jquery を使用してペインをカウントし、それに応じてラップ幅とペイン幅を設定して、目的の効果を実現することです。

http://jsbin.com/idufaj/6/edit

ペインはいくつでも追加でき、その効果は常に維持されます。

$(document).ready(function() {

var panes = $(".pane").length;
var width = panes * 100 + "%";
var panewidth = 100/panes + "%";
$("body").css({ width : width });
  $(".pane").css({width: panewidth });
});

この例では、ボディをラッパーとして使用していますが、任意の要素にすることができます。この場合、3 つのペインがあるため、ボディの幅は 300% に設定され、ペインの幅は 33.3% に設定されます。別のペインを追加すると、本体の幅は 400% になり、ペインの幅は 25% などになります。

于 2012-12-29T09:53:16.093 に答える