title: Bootstrap 3 Carousel full screen flicker
body: <p>I'm a beginner for web front-end design, using bootstrap to make a project prototype.
  I want to do a product like <a href="http://honeyalarm.co/" rel="nofollow">this website</a></p>
  
  <p>The features I want is
  * expand carousel to full screen when visiting the website and then can scroll down to another div element. </p>
  
  <p>I found this similar solution, but unfortunately it uses Carousel as the whole background.</p>
  
  <p>To get the effect I want, I check the javascript src code and edit it.</p>
  
  <p>modify this line (Shown on JSFIDDLE line 13 ) </p>
  
  <pre><code>$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
  </code></pre>
  
  <p>into this line (Shown on JSFIDDLE line 13 ) </p>
  
  <pre><code>$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
  </code></pre>
  
  <p>Yep, finally get the effect I want!! However, when the photo transition, a unexpected flicker appear, seems the photo is not at right location at first, then go to its right place immediately.
  It's annoying when I see the content inside div below, like 1info or 2info.
  here is the <a href="http://jsfiddle.net/yesimroy/3JCX6/" rel="nofollow">jsfiddle demo example</a> for the issue.</p>
  
  <p>I tried to use the solution like set z-index, but fail... 
  Can someone help me to solve this annoying problem? Thanks a lot!!</p>