title: BxSlider displayes last slide as first slide
body: <p>I have created 4 sliders. Initially all 4 are hidden (display:none) so I have used this code to display the relevant slider on click of its respective category.</p>
  
  <p>The slider configuration. </p>
  
  <pre><code>    touchEnabled: true,
      hideControlOnEnd: true,
      preloadImages: 'all',
      infiniteLoop: false,
      mode: 'horizontal',
      startSlide: 0,
      slideWidth: 300,
      minSlides: 2,
      maxSlides: 3,
      slideMargin: 10,
      pager: false,
      slideSelector: ".isotope-item",
      nextSelector: "#forefoo2_next",
      prevSelector: "#forefoo2_prev",
      nextText: '',
      prevText: '',
      onSliderLoad: function(){
          jQuery(".sliloading").hide();
      },
  
  
  jQuery(window).ready(function(){
      var slider4 = jQuery('.cat_fore').bxSlider();
      var slider2 = jQuery('#cat_two').bxSlider();
      var slider3 = jQuery('.cat_three').bxSlider();
      var slider1 = jQuery('.cat_one').bxSlider();
  
      jQuery("#sel_cat a" ).on("click", function(){
          var current     = jQuery(this).attr("slider");
          jQuery(".sliloading").show();
  
          jQuery(".slider").hide();
          if( current == "cat_one"){
              slider1.reloadSlider(s1config);
          }else if(current == "cat_two"){
              slider2.reloadSlider(s2config);
          }else if(current == "cat_three"){
              slider3.reloadSlider(s3config);
          }else if(current == "cat_fore"){
              slider4.reloadSlider(s4config);
          }
     }
  });
  </code></pre>
  
  <p>The problem is when the slider is having less then 20 slides it reverses the count of the slides that is it displayed last slide as first slide. </p>
  
  <p>For slides 20 or more then 20 it works fine.
  I also tried different solutions listed on <a href="https://github.com/wandoledzep/bxslider/issues/131">this link</a> but nothing worked for me.<br>
  I tried to replicate the same example on <a href="http://jsfiddle.net/pBbwt/">fiddle</a> which is working fine but on <a href="http://jamiewertzphotography.com/my-work/">live</a> it is still giving the same problem  </p>
  
  <p>I think problem is in the height or some other css element which is making it start from the last slide because in fiddle the view port is small so it displayed slider first slide and also when wee try to decrease the size of the view port of the browser it also displayed slider in the right way.    </p>