Bootstrap 3旋轉木馬全屏閃爍

Question

我是一個初級的web前端設計，使用bootstrap製作項目原型。 我想做一個產品如this website

我想要的功能是 *訪問該網站時，旋轉木馬擴大到全屏，然後可以向下滾動到另一div元素。

我發現這個類似的解決方案，但不幸的是它使用旋轉木馬作爲整個背景。

爲了獲得我想要的效果，我檢查了javascript src代碼並對其進行編輯。

修改此行（顯示在的jsfiddle 13號線）

$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'}); 

進入這行（顯示在的jsfiddle 13號線）

$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()}); 

是的，終於得到了我想要的效果！但是，當照片轉換出現意外閃爍時，似乎照片一開始就不在正確的位置，然後立即轉到其正確的位置。 當我看到下面的div內容時，如1info或2info，這很煩人。 這裏是jsfiddle demo example的問題。

我試圖使用類似set z-index的解決方案，但失敗... 有人可以幫助我解決這個煩人的問題嗎？非常感謝！！

Answer 1

這裏有一個無閃爍的版本沒有任何插件： HTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner"> 

     <div class="item active"> 
      <div id="slide1" class="fill"> 
       <div class=" carousel-caption"> 
        <h1>1</h1> 
       </div> 
      </div> 
     </div> 


     <div class="item"> 
      <div id="slide2" class="fill"> 
       <div class=" carousel-caption" > 
        <h1>2</h1> 
       </div> 
      </div> 
     </div> 

     <div class="item"> 
      <div id="slide3" class="fill"> 
       <div class=" carousel-caption" > 
        <h1>3</h1> 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 

CSS：

html, body { 
    height: 100%; 
} 

.carousel, .item, .active { 
    height: 100%; 
} 

.carousel-inner { 
    height: 100%; 
} 

.fill { 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    background-size: cover; 
} 

#slide1 { 
    background-image: url('http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg'); 
} 
#slide2 { 
    background-image: url('http://hdwallimg.com/wp-content/uploads/2014/02/White-Dog-Running-Wallpaper-HD.jpg'); 
} 
#slide3 { 
    background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg'); 
} 

無需額外的JavaScript，只要確保了jQuery和bootstrap.js文件鏈接到你的頁面。