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>
どんな助けでも大歓迎です！