0

水平方向および垂直方向に反応するギャラリー スライダー プラグインまたは Jscript の方向性を教えてもらえますか?

Flexslider1/2、Galleria、その他のさまざまなプラグインを試しましたが、それらはすべて幅が設定されており、ブラウザの縦方向のサイズ変更に反応しないようです? すべての CSS を変更しようとしましたが、うまくいきません。

での助けをいただければ幸いです。

例 (Flexslider を使用): ブラウザーを水平方向にサイズ変更すると、画像はブラウザー ウィンドウ内に収まるように自動的にサイズ変更されます。縦方向にサイズを変更すると、画像が縦方向に切り取られます。

目的: ブラウザー ウィンドウのサイズを縦方向に変更すると、画像の幅と高さが変更され、比率が維持され、ブラウザー ウィンドウ内に収まるようになります。水平と同じ。

うまくいけば、私はこれを明確に説明しました。明確化が必要な場合は、反対票を投じるのではなく質問してください。

4

2 に答える 2

1

Flexsliderのコードを調べてみると、ウィンドウの垂直方向の変更で画像のサイズが変更される可能性を除いて、特に何も見つかりませんでした。画像のサイズ変更は純粋に CSS ベースのように見え、幅/高さの情報を JavaScript にフィードします。ブラウザーが垂直方向のウィンドウの変更で画像のサイズを変更しないという DOM/CSS の問題に悩まされているようで、これがテスト済みの FlexSlider セットアップではないことが少しあります。

通常のレイアウト パラダイムではないため、すべてのブラウザーが垂直スクロールなしで 100% 垂直レイアウトを理解できるようにするのは、常に少し面倒でした。それ以降の CSS バージョンは少しは役に立ちましたが、ブラウザーの反応と意味するものを 100% 解釈する方法にはまだ大きな違いがあります。

私はスライダーのデモを取り、 100% の垂直レイアウトを管理するためにスタックの回答のほとんどを借りて、以下の詳細でこれになりました。

まず、画像の CSS プロパティを変更してレイアウトの高さをスケーリングし、幅を auto に設定して正しい縦横比を維持します。

 width: auto;
 height: 90%;

これはそれ自体で画像に対して機能しますが、FlexSlider JavaScript はページにいくつかの余分な要素を追加し、水平レイアウトのデモではいくつかの CSS 幅の値をデフォルトに設定します。

.flexslider .slides img {width: 100%; display: block;}

になる

.flexslider .slides { width: 100%; display: block;}
.img {display: block; }

これで、Chrome でスライドショーが動作するようになりました。

Firefox は、Chrome などを含む要素に高さ 100% の画像を適用しないため、すべての要素をさかのぼって、CSS で高さ 100% のルールを適用する必要がありました。

.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }

.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}

そこでも img を行ったことがわかります。そして、あなたはページになります。

このソリューションの欠点の 1 つは、画面の水平サイズを超えてサイズ変更される画像があることです。動作する幅に​​依存する基本的なカルーセルを使用すると問題が発生するため、おそらくこれに対応するために何かを組み込む必要があります。また、水平スクロールバーを追加して画面からマウスアウトすると、奇妙なことが起こりますが、それは残しておきます。また、自己責任で IE を試してください。

...そしてこれが、私がフロントエンド開発を敬遠する理由です =)

申し訳ありませんが、投稿は私が突っついているちょっとしたコメントになってしまいました。

于 2012-10-07T14:50:16.467 に答える
0

また、垂直方向 (および水平方向) に反応する画像スライダーも必要でした。すぐに使えるものを見つけられなかったので、私は自分が望んでいたように機能し始めました。

これが結果です。

主な要素は次のとおりです (完全なデモについては、jsFiddle にアクセスしてください)。完璧ではありませんが、始めるには十分なはずです。

HTML

<div id="fader">
    <a href="http://url1.com"><img src="http://placehold.it/600x600&text=Slide1" ></a>
    <a href="http://url2.com"><img src="http://placehold.it/600x600&text=Slide2" ></a>
    <a href="http://url3.com"><img src="http://placehold.it/600x600&text=Slide3" ></a>
    <a href="http://url4.com"><img src="http://placehold.it/600x600&text=Slide4" ></a>
</div>

CSS

#fader {
    position: relative; 
    width: auto;
    height: 100%;
}

#fader a {
    display:block;
    width:auto;
    height:100%;    
}

@media screen and (orientation: portrait) {
  img { 
      width: 100%; 
      height:auto !important;
  }
}
@media screen and (orientation: landscape) {
  img { 
      height: 100%;
      min-width:10%;
      max-width:100%;
  }
}

軽量の jQuery ローテータについては、このjsFiddleに感謝します。

于 2013-08-09T21:19:08.610 に答える