我在使用 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);
});
});