0

SlidesJSに基づいて3つの画像ギャラリーを作成し、それらをTwitterBootstrapTabs内に配置しました。

ここでデモを見ることができます。

ご覧のとおり、ギャラリーは正しく配置され、タブ内に配置されています。ただし、2番目と3番目のギャラリーの画像は表示されません。

これは、タブのコンテンツが非表示になっていて、ギャラリーのcssと競合している可能性があると思いますか？

解決策はありますか？

答え：

以下の提案に基づいて、私はそれをこのように使用することになりました：

$(document).ready(function(){
    $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
    $("#gallery-tab a").each(function( index ) {
        $(this).on('shown', function(){
            $('#slides' + index).slidesjs({ width: 918, height: 200, navigation: false });
        });
    });
});
4

1 に答える 1

1

ほとんどのタブシナリオで最も一般的な問題は、タブが非表示になっているときにギャラリーを初期化しているため、プラグインがサイズを計算したり、表示されていないタブの子要素に対して他のアクションを実行したりできないことです。

1）タブ選択でギャラリープラグインを初期化するか、2）タブを非表示にする{position: absolute; left: -999em;}代わりにのようなものを使用すること{display: none}ができます。

更新：あなたのコメントに基づいて、これはうまくいくはずです...

$('#gallery-tab a:first[data-toggle="tab"]').on('shown', function () {
   $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
})
于 2013-03-01T17:40:42.293 に答える