CSS3滑塊 - 在響應式幻燈片的相對格內絕對定位

Question

我正在修改從http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/得到的一些CSS代碼。這是一個視差CSS3滑塊。

我已經嘗試了幾乎所有的東西，我的問題是我不能在瀏覽器中以固定的最大寬度居中滑動div（da.slide）。最大寬度爲970px，並在瀏覽器調整大小時縮小。我嘗試過使用margin: 0 auto和left:50%，它現在還在工作 - 它只是掛在左邊。

我認爲可能的問題是滑塊div的位置。當我將其從絕對變爲相對時，它適用於第一張幻燈片，但其餘幻燈片在彼此之下消失/滑動。任何機會集中滑動div？

這裏是CSS3代碼：

.da-slider{ 
    width: 100%; 
    min-width: 320px; 
    height: 300px; 
    position: relative; 
    margin: 0 auto; 
    overflow: hidden; 
    background: transparent url(../images/waves.png); 
    background-repeat:repeat-x; 
    -webkit-transition: background-position 1s ease-out 0.3s; 
    -moz-transition: background-position 1s ease-out 0.3s; 
    -o-transition: background-position 1s ease-out 0.3s; 
    -ms-transition: background-position 1s ease-out 0.3s; 
    transition: background-position 1s ease-out 0.3s; 
} 

.da-slide{ 
    position: absolute; 
    max-width: 970px; 
    width:100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; 
    text-align: left; 

} 
.da-slide-current{ 
    z-index: 1000; 
} 
.da-slider-fb .da-slide{ 
    left: 100%; 
} 
.da-slider-fb .da-slide.da-slide-current{ 
    left: 0px; 
} 
.da-slide h2, 
.da-slide p, 
.da-slide .da-link, 
.da-slide .da-img{ 
    position: absolute; 
    opacity: 0; 
    left: 110%; 
} 
.da-slider-fb .da-slide h2, 
.da-slider-fb .da-slide p, 
.da-slider-fb .da-slide .da-link{ 
    left: 10%; 
    opacity: 1; 
} 

的HTML是：

<div id="da-slider" class="da-slider"> 
       <div class="da-slide"> 
        <h2>Easy management</h2> 
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> 
        <a href="#" class="da-link">Read more</a> 
        <div class="da-img"><img src="images/2.png" alt="image01" /></div> 
       </div> 
       <div class="da-slide"> 
        <h2>Revolution</h2> 
        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> 
        <a href="#" class="da-link">Read more</a> 
        <div class="da-img"><img src="images/3.png" alt="image01" /></div> 
       </div> 
       <div class="da-slide"> 
        <h2>Warm welcome</h2> 
        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p> 
        <a href="#" class="da-link">Read more</a> 
        <div class="da-img"><img src="images/1.png" alt="image01" /></div> 
       </div> 
       <div class="da-slide"> 
        <h2>Quality Control</h2> 
        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> 
        <a href="#" class="da-link">Read more</a> 
        <div class="da-img"><img src="images/4.png" alt="image01" /></div> 
       </div> 
       <nav class="da-arrows"> 
        <span class="da-arrows-prev"></span> 
        <span class="da-arrows-next"></span> 
       </nav> 
     </div> 

任何幫助將不勝感激！

Answer 1

.da-slide{ 
    position: relative; 
    margin: 0 auto; 
    max-width: 970px; 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; 
    text-align: left; 

} 

這似乎適用於我。不確定你想要做什麼。

絕對定位從頁面流中取出一個元素。頂部，左側，右側，底部屬性指的是其相對於其父元素的定位。通過將其擴展到100％寬度和100％高度，元素將擴展到它所在的容器的大小，禁用是以中心爲中心的能力。

您應該給該元素一個最小寬度，以便瀏覽器知道展開/收回框的大小。應對這些大小進行靈活的衡量，例如百分比。給它一個100％的寬度意味着該元素將擴展到它所在容器的大小。最大值和最小值允許元素在該設置的大小下停止擴展。

希望幫助， 乙

Answer 2

這是事實，過了一會兒，但我也有類似的問題，因爲你有，拉賈。具體來說，我正在使用da-slider（我作爲另一個模板的一部分），但滑塊中的圖像相對於正在查看的瀏覽器沒有正確調整大小。因此，例如，在iPhone上查看時，在PC上看起來不錯的較大圖像看起來非常大。

爲了解決我經歷的問題，並將每個da-slide div內的圖像寬度設置爲100％。接下來，我從da-slider類中移除了高度屬性。最後，我爲da-slide設置了display：none，並且爲da-slide-current類設置了display：block。這阻止父/容器div同時顯示所有圖像。最終結果是隻有「當前」圖像顯示，並且容器div相對於瀏覽器窗口的寬度展開/收縮。

下面是最終DA-Slider類是什麼樣子：

.da-slider{ 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
    overflow: hidden; 
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff; 
    -webkit-transition: background-position 1.4s ease-in-out 0.3s; 
    -moz-transition: background-position 1.4s ease-in-out 0.3s; 
    -o-transition: background-position 1.4s ease-in-out 0.3s; 
    -ms-transition: background-position 1.4s ease-in-out 0.3s; 
    transition: background-position 1.4s ease-in-out 0.3s; 
} 

分別

和DA-幻燈片和DA-滑流類，：

.da-slide{ 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; 
    text-align: left; 
    display: none; 
} 
.da-slide-current{ 
    z-index: 10; 
    display: block; 
} 

最後，DA-滑divs看起來像：

<div id="da-slider" class="da-slider"> 
    <div class="da-slide"> 
     <img src="assets/img/index/panel1.jpg" style="width: 100%;"> 
    </div> 
    ... 

再次，這是很好的事實（你的問題已超過一年在這一點上），但希望能幫助你或其他人。