jquery - bxSlider - ブラウザのサイズが変更されると、hidden(display:none) スライダが壊れる

Question

bxSlider に問題があり、ブラウザーのサイズを変更してから別のスライダーに移動すると (他のすべてのスライダーを非表示にし、クリックしたスライダー メニューを (灰色のナビゲーション バーを使用して) 表示します)、非表示のすべてのスライダーを表示しようとするとクラッシュします。 .

参考までに: 最初はすべてのスライダーが表示されているため、すべてのスライダーが初期化/ロードされ、ユーザーが灰色のメニューを使用して別のスライダーを選択すると、他のすべてのスライダーが非表示になり、必要なスライダーが表示されます。

ここで例をご覧ください: http://faithandsony.co.uk/SON799/

1. ページを読み込む 2. [アプリケーション] をクリックする 3. ブラウザのサイズを変更する 4. [類似の機能を持つ製品] をクリックする

誰でもこの問題に光を当てることができますか? ブラウザのサイズを少し変更するだけで、非表示のブラウザがすべて壊れてしまうのはなぜなのか、私には理解できないようです。サイズが変更されたときにブラウザーが何を実行/起動するかは確かですが、私の BxSlider はその影響を受けているようです。Chrome、Safari、Firefox、および Opera でこのエラーが発生するようです。

どうもありがとう。

ps私のマークアップと関係があると確信していますが、それを理解することはできません。

編集：

HTML:

<div class="wrap">
<div class="hub-bar-con">
    <div class="cat-nav">
            <span class="pointer"></span>
            <a href="javascript:;" class="active">Products with similar features</a>
            <a href="javascript:;">Applications</a>
            <a href="javascript:;">Case Studies</a>
            <a href="javascript:;">Technology</a>
    </div>
    <div class="slider-wrap-1 current">
        <div class="fade-l"></div>
        <div class="fade-r"></div>
        <div class="slider1">
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-16.jpg"><p>Cinematography & Super Ted!</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-17.jpg"><p>HD/SD Camcorders Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-18.jpg"><p>Camera Systems  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-19.jpg"><p>Decks, Recorders Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-20.jpg"><p>Pro Media  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-16.jpg"><p>Sample One  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-17.jpg"><p>Sample Two  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-18.jpg"><p>Sample Three  Lorem Ipsum</p></div></a>
        </div>
    </div>

    <div class="slider-wrap-2">
        <div class="fade-l"></div>
        <div class="fade-r"></div>
        <div class="slider2">
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-18.jpg"><p>Pro Media</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-16.jpg"><p>HD/SD Camcorders</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-17.jpg"><p>Decks, Recorders</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-20.jpg"><p>Decks, Recorders</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-19.jpg"><p>Pro Media</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-16.jpg"><p>Sample One</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-18.jpg"><p>Sample Two</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-19.jpg"><p>Sample Three</p></div></a>
        </div>
    </div>

    <div class="slider-wrap-3">
        <div class="fade-l"></div>
        <div class="fade-r"></div>
        <div class="slider3">
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-19.jpg"><p>Pro Media</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-17.jpg"><p>HD/SD Camcorders</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-16.jpg"><p>Decks, Recorders</p></div></a>
        </div>
    </div>

    <div class="slider-wrap-4">
        <div class="fade-l"></div>
        <div class="fade-r"></div>
        <div class="slider4">
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-20.jpg"><p>Pro Media</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-17.jpg"><p>HD/SD Camcorders</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-16.jpg"><p>Decks, Recorders</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-19.jpg"><p>Decks, Recorders Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-17.jpg"><p>Pro Media  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-20.jpg"><p>Sample One  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-18.jpg"><p>Sample Two  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-19.jpg"><p>Sample Three  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-20.jpg"><p>Pro Media</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-17.jpg"><p>HD/SD Camcorders</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-16.jpg"><p>Decks, Recorders</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-19.jpg"><p>Decks, Recorders Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-17.jpg"><p>Pro Media  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-20.jpg"><p>Sample One  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-18.jpg"><p>Sample Two  Lorem Ipsum</p></div></a>
          <a href="javascript:;"><div class="slide"><img border="0" src="img/img-19.jpg"><p>Sample Three  Lorem Ipsum</p></div></a>
        </div>
    </div>

</div>

<!--<a class="hide">Hide 2</a>
<a class="show">Show 2</a>-->

脚本：

$(window).load(function() {

//Grab the width of all .cat-nav a elements(including padding) 
//then half that value and store it in halfWidth[ ]
var halfWidth =[];
 $('.cat-nav a').each(function(index, element) {
halfWidth.push($(this).outerWidth(true) / 2);
});



//Use .position to find the left hand edge position of each .cat-nav a element
//then add half the width of each .cat-nav a element to find the centre(left:?px) of each
//of the .cat-nav a elements. Store them in an array for animating the pointer to
// - 7 value reduces location by half of the width of the pointer to make sure the pointer 
//sits centrally
var finalPositions = [];
$('.cat-nav a').each(function(index, element) {
    var positionNew = $(this).position();
    finalPositions.push((positionNew.left + halfWidth[index]) - 7);
});

$('.pointer').css('left',finalPositions[0]).show();


function checkPHeights(){
$('.slider1 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');
    }
});

$('.slider2 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');
    }
});

$('.slider3 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');

     }
});

$('.slider4 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');
    }
});
}

checkPHeights();

//animate pointer to relevant category element

$('.cat-nav a').click(function() {

    $('.cat-nav a').removeClass('active');
    $(this).addClass('active');
    var indx = $(this).index(); 
    if (indx == 1) {/*hideSlider(2);*/ $('.slider-wrap-2,.slider-wrap-3,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-1').fadeIn(300).addClass('current');}
    if (indx == 2) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-3,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-2').fadeIn(300).addClass('current');}
    if (indx == 3) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-2,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-3').fadeIn(300).addClass('current');}
    if (indx == 4) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-2,.slider-wrap-3').fadeOut(300).removeClass('current'); $('.slider-wrap-4').fadeIn(300).addClass('current');}

    var catIndex = ($(this).index() - 1);
    $('.pointer').animate({left:finalPositions[catIndex]},800);
});


});

$(document).ready(function() {


var slider1 = $('.slider1').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
    infiniteLoop: false,
    slideMargin: 12
      });

var slider2 = $('.slider2').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
infiniteLoop: false,
    slideMargin: 12
 });

var slider3 = $('.slider3').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
infiniteLoop: false,
    slideMargin: 12
 });

var slider4 = $('.slider4').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
infiniteLoop: false,
    slideMargin: 12
});

$('.bx-pager.bx-default-pager').each(function(index, element) {
    var sliderWrapIndex = index + 1;
    var pagerLength = $('.slider-wrap-' + sliderWrapIndex + ' .bx-pager.bx-default-pager > div').length;
    if ( pagerLength < 2 ) {
        $('.slider-wrap-' + sliderWrapIndex + ' .bx-pager.bx-default-pager').hide();
    }

});



$('.hide').click(function(e) {
    $('.slider-wrap-2').fadeOut(1000);
});

$('.show').click(function(e) {
    $('.slider-wrap-2').fadeIn(1000);
});

});