2017-02-21 8 views
0

私はクライアントのためにウェブをやっており、彼は私にメインセクションのスライダーを作ってもらうように頼んだのです。私はこのウェブのCSSのスライダーに問題があります

私はスライダーを行う多くの方法を見てきましたが、問題は私がテンプレートを使ってウェブを構築しており、それを行う正しい方法を得られないことです。セクションには背景画像のCssプロパティの画像がありますが、正しい方法はスライドだと思いますが、私は1000ものを試しました。私は狂ってしまいます。

これは私が3つの部分にスライドしなければならない「DIV」です:あなたは私のスライダーを作るための正しいCSSコードを置くことができる場合

/* Banner */ 
 

 
\t #banner { 
 
\t \t /*background-image: url("../../images/FullSizeRender.jpg");*/ 
 
\t \t background-position: center center; 
 
\t \t background-size: cover; 
 
\t \t height: 28em; 
 
\t \t text-align: center; 
 
\t \t position: relative; 
 
\t } 
 

 
\t \t #banner header { 
 
\t \t \t position: absolute; 
 
\t \t \t bottom: 0; 
 
\t \t \t left: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t background: #212121; 
 
\t \t \t background: rgba(27, 27, 27, 0.75); 
 
\t \t \t color: #fff; 
 
\t \t \t padding: 1.5em 0; 
 
\t \t } 
 

 
    /* ... More code not encessary in this question*/
<!-- Banner --> 
 

 
\t \t \t \t <section id="banner"> 
 
\t \t \t \t \t <header> 
 
\t \t \t \t \t \t <h2>Reconocido por: <em>Afiliación oficial con la tabacalera <a href="http://html5up.net">Monte Castillo</a></em></h2> 
 
\t \t \t \t \t \t <a href="quienessomos.html" class="button">Leer más</a> 
 
\t \t \t \t \t </header> 
 
\t \t \t \t </section> 
 
       <!--2 More sections to slide--> 

、またはあなたが見つけた場合jQueryやJavascriptのような他の方法で、私はあなたに非常に感謝します。私がCSSを選択する理由は、テンプレートコードが変更されるのを恐れているからです.JavaScript/jQueryをマスターするだけでなく、CSSから何かを壊して修復することができます。

これは私が行っているテストをホストするドメインです:http://martinherrada.com
あなたattemptionをありがとう

真心を込め、 MH11セブンイレブン

+0

このスライダの仕組みを説明できますか? 3 divsの合計でスライダーが左にスライドするようになっていますか?たとえば、div 1、div 2、div 2を表示しますか? –

+0

はい、正確です。 6秒または7秒で2番目のスライド。 –

答えて

0

あなたは、背景画像プロパティとスライダー効果を達成するために、CSSアニメーションを使用することができます。

+0

私はそれを知っています。しかし、問題はどうですか? 正しい方法は何ですか。私のコードに何を追加しますか? –

0

あなたは、ブートストラップカルーセル使用する必要があります。実装が非常に簡単です

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

:W3Schoolsの上

http://getbootstrap.com/javascript/#carousel

チュートリアルを。

+0

おかげで、私は見て(Y) –

関連する問題