浏览器调整大小时，bxSlider - hidden（display：none）滑块会中断

Question

我遇到了bxSlider的问题，如果我调整浏览器大小然后导航到另一个滑块（隐藏所有其他滑块并显示单击的滑块菜单（使用灰色导航条）），所有隐藏的滑块随后会在您尝试时崩溃查看它们。

仅供参考：我最初可以看到所有滑块，所以当用户使用灰色菜单选择另一个滑块时，它们都会初始化/加载我隐藏所有其他滑块并显示他们想要的滑块。

请在此处查看示例：http://faithandsony.co.uk/SON799/

所以过程是 1.加载页面 2.单击“应用程序” 3.调整浏览器大小 4.单击“具有类似功能的产品” - 现在应该打破此滑块以及所有其他隐藏的滑块。

任何人都可以对这个问题有所了解吗？对我来说似乎没有意义，为什么即使是最轻微的浏览器调整也会破坏所有隐藏的浏览器。我确定什么浏览器在调整大小时会执行/触发，但我的BxSlider似乎受其影响。我在Chrome，Safari，Firefox和Opera中似乎有这个错误。

非常感谢。

p.s我确定它与我的标记有关，但我无法弄明白。

编辑：

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>-->

SCRIPT：

$(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);
});

}）;