私はクライアントのためにウェブをやっており、彼は私にメインセクションのスライダーを作ってもらうように頼んだのです。私はこのウェブの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セブンイレブン
このスライダの仕組みを説明できますか? 3 divsの合計でスライダーが左にスライドするようになっていますか?たとえば、div 1、div 2、div 2を表示しますか? –
はい、正確です。 6秒または7秒で2番目のスライド。 –