title: bxSlider - hidden(display:none) slider breaks when browser resized
body: <p>I'm having an issue with the bxSlider where where if I resize my browser then navigate to another slider(hide all other sliders and show clicked slider menu(using grey nav bar)), all hidden sliders then crash when you try to view them.</p>
  
  <p>FYI: Initially I have all sliders visible so they all initialise/load then once a user selects another slider using the grey menu I hide all others and show the one they want.</p>
  
  <p>Please see an example here: <a href="http://faithandsony.co.uk/SON799/" rel="nofollow">http://faithandsony.co.uk/SON799/</a></p>
  
  <p>So process is 
  1. Load page
  2. Click 'Applications'
  3. Resize browser 
  4. Click 'Products with similar features' -
  This slider should now be broken, along with all other hidden sliders.</p>
  
  <p>Can anyone please shed some light on this problem? It doesn't seem to make sense to me why even the slightest resize of my browser breaks all hidden ones. I'm sure what browsers do/fire when they are resized, but my BxSlider seems to be affected by it. I have seem this error in Chrome, Safari, Firefox and Opera.</p>
  
  <p>Many thanks.</p>
  
  <p>p.s I'm sure its something to do with my markup but I just can't figure it out.</p>
  
  <p>EDIT:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
  &lt;div class="hub-bar-con"&gt;
      &lt;div class="cat-nav"&gt;
              &lt;span class="pointer"&gt;&lt;/span&gt;
              &lt;a href="javascript:;" class="active"&gt;Products with similar features&lt;/a&gt;
              &lt;a href="javascript:;"&gt;Applications&lt;/a&gt;
              &lt;a href="javascript:;"&gt;Case Studies&lt;/a&gt;
              &lt;a href="javascript:;"&gt;Technology&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="slider-wrap-1 current"&gt;
          &lt;div class="fade-l"&gt;&lt;/div&gt;
          &lt;div class="fade-r"&gt;&lt;/div&gt;
          &lt;div class="slider1"&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Cinematography &amp; Super Ted!&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;HD/SD Camcorders Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Camera Systems  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Decks, Recorders Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Pro Media  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Sample One  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;Sample Two  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Sample Three  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="slider-wrap-2"&gt;
          &lt;div class="fade-l"&gt;&lt;/div&gt;
          &lt;div class="fade-r"&gt;&lt;/div&gt;
          &lt;div class="slider2"&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;HD/SD Camcorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Sample One&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Sample Two&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Sample Three&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="slider-wrap-3"&gt;
          &lt;div class="fade-l"&gt;&lt;/div&gt;
          &lt;div class="fade-r"&gt;&lt;/div&gt;
          &lt;div class="slider3"&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;HD/SD Camcorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="slider-wrap-4"&gt;
          &lt;div class="fade-l"&gt;&lt;/div&gt;
          &lt;div class="fade-r"&gt;&lt;/div&gt;
          &lt;div class="slider4"&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;HD/SD Camcorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Decks, Recorders Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;Pro Media  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Sample One  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Sample Two  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Sample Three  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Pro Media&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;HD/SD Camcorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-16.jpg"&gt;&lt;p&gt;Decks, Recorders&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Decks, Recorders Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-17.jpg"&gt;&lt;p&gt;Pro Media  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-20.jpg"&gt;&lt;p&gt;Sample One  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-18.jpg"&gt;&lt;p&gt;Sample Two  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;a href="javascript:;"&gt;&lt;div class="slide"&gt;&lt;img border="0" src="img/img-19.jpg"&gt;&lt;p&gt;Sample Three  Lorem Ipsum&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;!--&lt;a class="hide"&gt;Hide 2&lt;/a&gt;
  &lt;a class="show"&gt;Show 2&lt;/a&gt;--&gt;
  </code></pre>
  
  <p></p>
  
  <p>SCRIPT:</p>
  
  <pre><code>$(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() &gt; 22)
      {
          $(this).css('margin','-7px 0 10px 0');
      }
  });
  
  $('.slider2 .slide p').each(function(index, element) {
      if ($(this).height() &gt; 22)
      {
          $(this).css('margin','-7px 0 10px 0');
      }
  });
  
  $('.slider3 .slide p').each(function(index, element) {
      if ($(this).height() &gt; 22)
      {
          $(this).css('margin','-7px 0 10px 0');
  
       }
  });
  
  $('.slider4 .slide p').each(function(index, element) {
      if ($(this).height() &gt; 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 &gt; div').length;
      if ( pagerLength &lt; 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);
  });
  </code></pre>
  
  <p>});</p>