title: jQuery - bxSlider resize screen and change slider settings
body: <p>When the viewport size is 600px+ I want the slider to display 3 items and when the viewport is less than 600px I want the slider to display only one item</p>
  
  <p>But at the moment I have a problem when the screen is resized to less then 600px and then increased its not reloading the slider with the correct settings (3 slides)</p>
  
  <p>Does anyone know what the problem may be please? I have set up a fiddle below</p>
  
  <p><a href="http://jsfiddle.net/e2RaE/" rel="nofollow">http://jsfiddle.net/e2RaE/</a> </p>
  
  <pre><code>news3col = $('ul').bxSlider({
      slideWidth: 500,
      minSlides: 3,
      maxSlides: 3,
      slideMargin: 30
  });
  
  function checkMq() {
      if (Modernizr.mq('only screen and (max-width: 599px)')) {
          $('div').css('background-color', 'lightblue');
          news3col.reloadSlider({
              minSlides: 1,
              maxSlides: 1
          });
      }
      if (Modernizr.mq('only screen and (min-width: 600px)')) {
          $('div').css('background-color', 'lightgreen');
          news3col.reloadSlider();
      }
  }
  
  $(function () {
      // the call to checkMq here will execute after the document has loaded
      checkMq();
      $(window).resize(function () {
          // the call to checkMq here will execute every time the window is resized
          checkMq();
      });
  });
  </code></pre>