2012-11-30 65 views
9

我正在使用帶有三張幻燈片的基本Bootstrap旋轉木馬。在我實現滑塊之前,我有一個靜態圖像通過其各自的div的CSS背景圖像。在我的CSS中,我使用了background-size:cover,並且非常喜歡圖像響應不同瀏覽器寬度的方式。根據圖像的寬度,我可以讓圖像的重要部分始終保持可見和居中,而任一側的額外寬度僅在寬屏顯示器上可見,作爲附加效果。將「background-size:cover」應用於Twitter Bootstrap旋轉木馬幻燈片

我想保留現在使用Bootstrap的Carousel時的相同圖像行爲,但即使將尺寸指定給幻燈片的視口,仍然無法顯示背景圖像。我現在已經設置好了,所以每張幻燈片都顯示一個單獨的CSS類,每個幻燈片都有不同的背景圖片,因此可以在三張圖片之間滾動。

如果這不可能通過背景圖像,它有另一種方式來操縱圖像元素,使他們的顯示行爲是相同的背景大小:蓋?

這裏是我的HTML:

<div id="myCarousel" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item ad1"> 
     <img src="{{ STATIC_URL }}img/TestBannerAd.png"> 
    </div> 
    <div class="item ad2"> 
     <img src="{{ STATIC_URL }}img/TestBannerAd2.png"> 
    </div> 
    <div class="item ad3"> 
     <img src="{{ STATIC_URL }}img/TestBannerAd3.png"> 
    </div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

我的CSS:

#myCarousel { 
    width: 100%; 
} 
.carousel-control { 
    margin-top: 20px; 
} 
.carousel-inner { 
    width: 100%; 
    height: 400px; 
} 
.ad1 { 
    background: url(../img/TestBannerAd.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.ad2 { 
    background: url(../img/TestBannerAd2.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.ad3 { 
    background: url(../img/TestBannerAd3.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

但願這不是一個愚蠢的問題,我們可以算出來!

回答

21

我知道我的回覆很晚,但我只是通過搜索找到您的問題來做類似的事情。首先,您需要從HTML中刪除圖像,並更改一些CSS以將高度應用於旋轉木馬中的類「item」的所有div。

應用我的修改,你的代碼應該是這樣的:

<div id="myCarousel" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="item active ad1"> 
     <div class="carousel-caption"> 
      <h4>First Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     </div> 
    </div> 
    <div class="item ad2"> 
     <div class="carousel-caption"> 
      <h4>Second Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     </div> 
    </div> 
    <div class="item ad3"> 
     <div class="carousel-caption"> 
      <h4>Third Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     </div> 
    </div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

而CSS:

#myCarousel { 
    width: 100%; 
} 
.carousel-control { 
    margin-top: 20px; 
} 
.carousel-inner .item { 
    width: 100%; 
    height: 400px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.ad1 { 
    background: url(../img/TestBannerAd.png) no-repeat center center fixed; 
} 
.ad2 { 
    background: url(../img/TestBannerAd2.png) no-repeat center center fixed; 
} 
.ad3 { 
    background: url(../img/TestBannerAd3.png) no-repeat center center fixed; 
} 
+0

感謝您發佈此信息。我能夠實現我想要做的事情,但似乎無法將文本添加到這些幻燈片中。任何想法,我會怎麼做你的代碼?感謝 – AAA

+0

我已經修改了代碼標記爲幻燈片標題和文本,裏面只與類「旋轉木馬字幕」有一個標題和段落中的股利。我還添加了「積極」級到第一滑動,就不能正常工作,否則。 –

+0

這就像魅力...謝謝,這是節省很多時間...... –

8

這是jQuery的等價物的覆蓋碼:

$.each(jQuery('.carousel .item'), function(i, val) { 
    $(this).css('background-image','url('+$(this).find('img').attr('src')+')').css('background-size','cover').find('img').css('visibility','hidden'); 
    }); 

它需要圖像源並傳入項目,然後隱藏實際圖像。

此外,您可能需要隱藏輪播,直到jQuery.each完成。我建議做一下可見性:CSS級別的圖像隱藏黑客。所以用戶不會在更大的屏幕上看到圖像放大。

+0

那裏的好方法。但是如果JS被禁用,它將不起作用。 – jaysingkar

+5

傳送帶甚至與JS禁用工作? js殘障人士應該處理他們的選擇,以打破用戶體驗。 – KinsDotNet

+0

不錯:)不得不設置.carousel和.item的高度,以防止巨大的圖像炸燬佈局。 – Brainfeeder

1

剛剛發現這個codepen https://codepen.io/wisnust10/pen/mPJwWv/ 它採用另一種解決方案。 (見CSS)

.item:nth-child(1) { 
    background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/HZZKGVVJ6I.jpg'); 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    } 

在Chrome和IE測試這和它的伎倆。

希望它能幫助某種方式。

相關問題