title: Flexslider adding extra space to right of final slide…
body: <p>I’m running into an issue with Flexslider adding extra white space after the final slide.</p>
  
  <p>I have created a 702px-wide div meant to display two 342px-wide slides at a time, with 18px between each. I’ve set the 'itemWidth' to '360px' to allow for the extra space and the 'itemMargin' to '0'.</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $(window).load(function() {
        $('.flexslider').flexslider({
          animation: "slide",
          animationLoop: true,
          itemWidth: 360,
          itemMargin: 0
        });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>This gives me the proper spacing I need between slides but adds an additional 18px at the end that I cannot for the life of me get rid of. Even more annoying, it treats it like a fourth sliding transition when it should only need three.</p>
  
  <p>Here’s a screen grab: <a href="http://bit.ly/XHJVeU" rel="nofollow">http://bit.ly/XHJVeU</a></p>
  
  <p>Note the four dots at the bottom. It should only need three to show four slides.</p>
  
  <p>I have tweaked every bit of CSS I can think of but still no luck. Even adding padding/margin to the images does nothing. Frustrating.</p>
  
  <p>Either way. I’m hoping someone has run into this before and that it’s a quick fix.</p>
  
  <p>Thanks in advance.</p>
  
  <p>UPDATE: HTML included for reference.</p>
  
  <pre><code>&lt;div id="carousel" class="flexslider"&gt;
  &lt;ul class="slides"&gt;
      &lt;li&gt;&lt;img src="images/suite-a_01.png" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/suite-a_02.png" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/suite-a_03.png" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/suite-a_04.png" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>