1

我正在修改从http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/获得的一些 CSS 代码。它是一个视差 CSS3 滑块。

我几乎尝试了所有方法，但我的问题是我无法在浏览器中以固定的最大宽度居中滑动 div（da.slide）。最大宽度为 970 像素，当浏览器调整大小时会缩小。我已经尝试使用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>

任何帮助将不胜感激！

4

2 回答 2

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

}

这似乎对我有用。不知道你到底想做什么。

绝对定位将元素从页面流中取出。top、left、right、bottom 属性指的是它相对于其父元素的位置。通过将其扩展到 100% 宽度和 100% 高度，元素将扩展到它所在的容器的大小，禁用能够居中。

您应该给元素一个最小宽度，以便浏览器知道展开/缩回框的大小。这些尺寸的大小应给予灵活的度量，例如百分比。给它一个 100% 的宽度意味着元素将扩展到其所在容器的大小。最大值和最小值允许元素在该设置大小处停止扩展。

希望有帮助，B

于 2012-07-06T19:03:41.873 回答
1

这是事后的事，但我遇到了和你一样的问题，Raja。具体来说，我正在使用 da-slider（我作为另一个模板的一部分获得），但滑块中的图像相对于正在查看它们的浏览器没有正确调整大小。因此，在 PC 上看起来不错的较大图像在 iPhone 上查看时看起来相当大。

为了解决这个问题，我将每个 da-slide div 中的图像宽度设置为 100%。接下来，我从 da-slider 类中删除了 height 属性。最后，我为 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-slide 和 da-slide-current 类，分别为：

.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-slide div 看起来像：

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

同样，这是事后的事（此时您的问题已经有一年多了），但希望对您或其他人有所帮助。

于 2013-12-08T23:55:21.897 回答