6

優れたCycle2jQueryプラグインを使用してレスポンシブ画像ギャラリーを設定しようとしています。ギャラリーには、縦向きと横向きの両方の画像が表示されます。

Centered Slidesオプション(Cycle2のCenterプラグイン:http://jquery.malsup.com/cycle2/demo/center.php)を使用しています、これがWebkitブラウザーで問題を引き起こしているようです(そうでない場合は、ブラウザーウィンドウのサイズを変更してみてください。最初は明らかです!)

http://goo.gl/NFFZk

緑の背景はサイクルコンテナを表しています。

センターオプションが追加されていない場合(data-cycle-center-horz = true data-cycle-center-vert = true)、すべてが正常に機能しています。以下を参照してください。

http://goo.gl/p76wi

中央バージョンで問題の原因を特定できません。

画像のCSSコードはごくわずかです。

.cycle-slideshow img {
    max-height: 100%;
    max-width: 100%;
}

含まれている要素のCSSはここにあります

.cycle-slideshow {
    background: green;
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:20px auto;
    padding:0;
    width:80%;
    }

助けてくれてありがとう!

4

3 に答える 3

1

別のオプションがあります。

$('.cycle-slideshow').on('cycle-initialized', function( event, opts ) {                
    $(window).trigger('resize');
});
于 2014-10-14T14:59:54.917 に答える