title: Weird flickering background with multiple flex sliders on page
body: <p>I have a website that is 1-page and has multiple sections, each containing a content DIV and a flexslider. On larger screens, there seems to be a weird bug that's causing the backgrounds to flicker with the slide animation, in action here: <a href="http://yyy.comuf.com/PORT/" rel="nofollow">http://yyy.comuf.com/PORT/</a></p>
  
  <p>I think it's because there are multiple flexsliders on the page, but not sure of the best way to fix it.</p>
  
  <p>JS</p>
  
  <pre><code>  $(window).load(function() {
  $('#main-slider').flexslider({
    animation: 'slide',
    controlsContainer: '.flex-container'
  });
  
  $('#secondary-slider').flexslider();
  </code></pre>
  
  <p>});</p>
  
  <p>HTML SLIDER-1</p>
  
  <pre><code>&lt;div id="main-slider" class="flexslider"&gt;
    &lt;ul class="slides"&gt;
      &lt;li&gt;
        &lt;img src="img/FP1.png" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="img/abcd.png" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="img/i-eg.png" /&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HTML SLIDER-2</p>
  
  <pre><code>&lt;div id="secondary-slider" class="flexslider"&gt;
    &lt;ul class="slides"&gt;
      &lt;li&gt;
        &lt;img src="img/OU.png" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="img/OU1.png" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="img/OU2.png" /&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Both sliders are currently the same except different images.</p>
  
  <p>Main JS file is here: <a href="http://yyy.comuf.com/PORT/js/jquery.flexslider.js" rel="nofollow">http://yyy.comuf.com/PORT/js/jquery.flexslider.js</a></p>