title: bxslider loop carousel first child issue
body: <p>I am using bxslider to build a nice carousel displaying 2 items at a time.
  this is my html:</p>
  
  <pre><code>&lt;ul class="bxslider clearfix"&gt;
              &lt;li&gt;
                  &lt;span&gt;Case Study&lt;/span&gt;
                  &lt;h3&gt;The London Business School&lt;/h3&gt;
                  &lt;a href="#"&gt;+ See Full Case Study&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;span&gt;Case Study&lt;/span&gt;
                  &lt;h3&gt;The Terra Santa College&lt;/h3&gt;
                  &lt;a href="#"&gt;+ See Full Case Study&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                  &lt;span&gt;Case Study&lt;/span&gt;
                  &lt;h3&gt;Case Study number 3&lt;/h3&gt;
                  &lt;a href="#"&gt;+ See Full Case Study&lt;/a&gt;
              &lt;/li&gt;
         &lt;/ul&gt;
  </code></pre>
  
  <p>and this is my JS:</p>
  
  <pre><code>jQuery('#case-studies .bxslider').bxSlider({
    mode: 'horizontal',
    useCSS: false,
    moveSlides: 1,
    pager: false,
    minSlides: 2,
    maxSlides: 2,
    slideWidth: 360,
    autoHidePager: true,
    slideMargin: 10
  });
  </code></pre>
  
  <p>It works great and shows 2 items each click.
  the issue I have is that each slide has a background image of a simple line in the left side and I am trying to remove the backgroun from the first item only.</p>
  
  <p>I was thinking I can use last-child in my li item like so:</p>
  
  <pre><code>#case-studies .bxslider li:first-child {
    background: none !important;
  }
  </code></pre>
  
  <p>but after I checked on the site the bxslider loop animation clones the number of the slides you have in order to create a loop and the first hcild isn't necassary the one you see..</p>
  
  <p>anyway I can add a class to the first item that appears?
  Thanks</p>