我在做這個網頁的CSS滑塊時遇到問題

我正在爲一個客戶端做一個網站，他讓我讓他在主要部分的滑塊。我在做這個網頁的CSS滑塊時遇到問題

我見過很多方法來做滑塊，但問題是我用模板構建了網頁，並且我沒有得到正確的方法來做到這一點。該部分具有背景圖像Css屬性中的圖像，我認爲正確的方式是滑動，但我已嘗試過1000件事情，並且我會發瘋。

這是「格」，我有3個部分滑動：

/* 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-->

如果你可以把我正確的CSS代碼，以使滑塊，或者如果你發現另一種方式，如jQuery或Javascript，我會非常感謝你。我選擇CSS來做這件事的原因是因爲我擔心模板代碼會被改變，我不只是掌握javascript/jQuery，如果我從CSS中分離出某些東西，我可以修復它。

這是我主持測試的域名：http://martinherrada.com。
感謝您attemption

親切， MH11十一

來源

2017-02-21 David Martin

你能解釋這個滑塊應該如何工作嗎？因爲在滑塊應該向左滑動總共3個div？例如，它顯示div 1，然後div 2，然後div 2？ –

是的，確切地說。在第二張幻燈片的6秒或7秒內。 –

您可以使用CSS動畫實現與背景圖像屬性中的滑塊作用。在W3Schools的

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

一個教程：

來源

2017-02-21 20:46:49 shahburhan

我知道了。但問題是如何？你知道什麼是正確的方法嗎？你會在我的代碼中添加什麼？ –

您應該使用轉盤引導

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

這是很容易實現。

來源

2017-02-21 20:58:31 Kashyap

謝謝兄弟，我看看（Y） –

我在做這個網頁的CSS滑塊時遇到問題

回答

相關問題