title: bxSlider Images Custom Height and Width
body: <p>I'm using bxslider, for my carousel images.. </p>
  
  <pre><code>$(document).ready(function(){
    $('.slider4').bxSlider({
    slideWidth: 300,
    minSlides: 2,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10
   });
  });
  
  
  &lt;div class="slider4"&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar1"&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar2"&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar3"&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar4"&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar5"&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar6"&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar7"&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar8"&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar9"&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img src="http://placehold.it/300x150&amp;text=FooBar10"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code came from the examples page of bxlider site. This is the one i'm using right now. I just noticed that when i resize my browser to smaller size, e.g 768, 480 and 320.. </p>
  
  <p>It's responsive but the images are chopped off and too small for 320px and 480px.  </p>
  
  <p>What i want is, If i re-size the browser to 480 or 320, it will show 2 images only. preserving the height and width of the images.  Any Ideas on how to do that?</p>