Slidesjs腳本：設置最小寬度以獲得100％寬度的外觀

我的客戶想要在首頁上顯示幻燈片的「寬屏幕」。背景圖像非常寬，如1700〜px寬。內容的設計使數據的最小寬度爲960px（我使用「margin：0 auto;」來居中）。Slidesjs腳本：設置最小寬度以獲得100％寬度的外觀

CSS：

#rotate { 
    height: 487px; 
    min-width: 960px; 
    margin: 0 auto;} 
    .slides_container { 
    width: 100%; 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
    display: none; 
} 

/* 
    Each slide 
    Important: 
    Set the width of your slides 
    If height not specified height will be set by the slide content 
    Set to display block 
*/ 
.slides_container div { 
    width: 960px; 
    height: 487px; 
    display: block;}

HTML：

<div id="rotate"> 

<div id="container"> 
    <div id="slides"> 
     <div class="slides_container"> 
      <!-- These are the divs that "slide" --> 
      <div style="min-width: 960px; background: url(images/rotate-bg.jpg) center no-repeat;"> 
       <div style="margin: 0 auto; width: 960px;">Test 1</div> 
      </div> 
      <div style="min-width: 960px; background: url(images/about-markshare-graph.png) center no-repeat;"> 
       <div style="margin: 0 auto; width: 960px;">Test 2</div> 
      </div> 
          <!-- End of sliding divs --> 

     </div> 
     <a href="#" class="prev"><img src="images/arrow-prev.png" width="40" height="43" alt="Arrow Prev"></a> 
     <a href="#" class="next"><img src="images/arrow-next.png" width="40" height="43" alt="Arrow Next"></a> 
    </div> 
</div>

這裏是我似乎無法找到合適的CSS改變網站的鏈接：http://www.senjusprinkler.com/2012/index.php

來源

2012-01-31 PaulELI

你需要的幻燈片跨越車身的100％，或包裹樣的內容？ – shaunsantacruz 2012-01-31 19:08:39

尋找使幻燈片100％的身體的寬度。雖然在滑動div裏面，會有以960px寬度爲中心的內容。 – PaulELI 2012-02-01 06:10:52

我試圖做同樣的事情，最終發現這個滑塊，它做t瑞克很好。

檢查出來http://flex.madebymufffin.com/

來源

2012-01-31 18:50:09

將檢查出來並報告回來。感謝您的鏈接。 – PaulELI 2012-02-01 06:11:10

謝謝。這個劇本簡單而神奇。 – PaulELI 2012-02-01 06:25:42

是的，這是一個非常體面的腳本，至少可以說。很高興你解決了你的問題。 – 2012-02-01 13:22:31

Slidesjs腳本：設置最小寬度以獲得100％寬度的外觀

回答

相關問題