title: Set the amount of displaying Flex Slider carousel image
body: <p>I embed flex slider with carousel on my site. However, I did not set the property of the slider well(or might be CSS) that it is like this. <a href="http://www.screencast.com/t/xlRssnj43" rel="nofollow">http://www.screencast.com/t/xlRssnj43</a> The last image of the carousel is half shown. </p>
  
  <p>Although I can click on it, ideally I would like it to be this: <a href="http://www.screencast.com/t/NfOlZdUMQh" rel="nofollow">http://www.screencast.com/t/NfOlZdUMQh</a> Having next/previous button showing all the time, and having 4 full images showing. The 5th one should be on the next slide. </p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;div class="flexslider" id="slider"&gt;
      &lt;ul class="slides"&gt;
          &lt;li&gt;&lt;img src="image1.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="image2.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="image3.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="image4.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="image5.jpg" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!--flexslider--&gt;
      &lt;div class="flexslider" id="carousel"&gt;
      &lt;ul class="slides"&gt;
          &lt;li&gt;&lt;img src="image1.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="image2.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="image3.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="image4.jpg" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="image5.jpg" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!--flexslider--&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my jquery code:</p>
  
  <pre><code>$('.flexslider').each(function() {
                  var $root = $(this);
  
                  // kill item if no image
                  $root.find("li").each(function(){
                      var src = $(this).find("img").attr("src");
                      if(!src){
                          $(this).remove();
                      }
                  });
                  });
                  $('#carousel').flexslider({
                      animation: "slide",
                      controlNav: false,
                      animationLoop: false,
                      slideshow: false,
                      itemWidth: 91,
                      itemMargin: 19,  //this seems like not working, I also set in css
                      asNavFor: '#slider',
                      minItems: 4
                    });
  
                    $('#slider').flexslider({
                      animation: "slide",
                      controlNav: false,
                      animationLoop: false,
                      slideshow: false,
                      sync: "#carousel"
                    });
  
  
          }
  </code></pre>
  
  <p>I have also put it in a demo page: <a href="http://ultimatetemplate.businesscatalyst.com/slider" rel="nofollow">http://ultimatetemplate.businesscatalyst.com/slider</a></p>
  
  <p>Any ideas? Cheers.</p>