以前に非表示のdivを表示するときにbxSliderを再ロード

Question

bxSliderには、特定のアクションでスライダをリロードする機能があります。私は、次のように私のページに複数のスライダを初期化：タブレイアウトのためのjQueryのeasytabsを使用して

jQuery('.product_carousel_images').each(function(index,item) { 

    jQuery(item).bxSlider({ 
     mode: 'fade', 
     speed: 600, 
     pause: 7000, 
     auto: false, 
     controls: false, 
     pager: true, 
     pagerCustom: '.product_carousel_pager' 
    }); 

}); 

は、第1スライダは、最初に（すなわち目に見える）タブとうまく機能している、第二がで生成されている間最初は隠れたdiv。 bxSliderはdisplay：noneのdiv内のスライダの高さを0に設定するので、2番目のスライダはゼロ高さの画像を持ちます。 visibility：hiddenはオプションではありません。タブインターフェースでは許可されていないからです。 この複数のスライダー機能を使用すると、タブヘッダーをクリックするなど、特定のアクションでスライダーを再読み込みする方法を教えてください。

Answer 1

私はbxSliderを自分で使っていませんが、bxSliderの "reloadSlider"関数を利用することができます。イベントの後：

http://bxslider.com/examples/reload-slider

はちょうどあなたが簡単にタブで、あなたのケースでeasytabsの使用をしなければならないだろう、タブを変更するたびに、それにreloadSliderを呼び出し、初期化時に、あなたのスライダーへの参照を保持します。ここEasyTabs'イベント・フックの

var slider = jQuery(item).bxSlider({ 
    mode: 'fade', 
    speed: 600, 
    pause: 7000, 
    auto: false, 
    controls: false, 
    pager: true, 
    pagerCustom: '.product_carousel_pager' 
}); 
// Reload slider whenever tab changes 
$('#your-tabs-container').bind('easytabs:after', function() { 
    // TODO identify the displayed tab using EasyTabs target panel parameters in order not to reload bxSlider when the wrong tab is displayed 
    slider.reloadSlider(); 
}); 

詳細情報：あなたのCSS `.bx-ビューポートにこれを追加すること https://os.alfajango.com/easytabs/#configuration