卡片旋轉木馬

-1

我不知道如何命名我的問題，所以我對標題感到抱歉。卡片旋轉木馬

我用一些卡片製作了這個部分，但我想製作一些菜單，我不知道如何調用它......就像我把箭頭指向左右，當我點擊它時，會出現更多卡片。我覺得它就像一個旋轉木馬。但直到現在我無法做出我想要的東西。這樣的形象：

<section id="tres"> 
     <h1> TEST </h1> 
    <hr> 

    <div id="cards02"> 

    <div class="card" style="width: 25rem;" id="card-1"> 
    <img class="card-img-top" src="idosa.png" alt="Card image cap"> 
    <div class="card-body"> 
    <h4 class="card-title">TEST 
</h4> 
    <h6> 13 Outubro 2017</h6> 
    <p class="card-text">TEST TEST TEST </p> 
    <a href="#" class="btn btn-primary">TEST </a> 
    </div> 
</div> 




    <div class="card" style="width: 25rem;" id="card-2"> 
    <img class="card-img-top" src="idosa.png" alt="Card image cap"> 
    <div class="card-body"> 
    <h4 class="card-title">TEST TEST TEST 
</h4> 
    <h6> 13 Outubro 2017</h6> 
    <p class="card-text">TEST TEST TEST </p> 
    <a href="#" class="btn btn-primary">TEST </a> 
    </div> 
</div> 
    <div class="card" style="width: 25rem;" id="card-3"> 
    <img class="card-img-top" src="idosa.png" alt="Card image cap"> 
    <div class="card-body"> 
    <h4 class="card-title"TEST TEST TEST 
</h4> 
    <h6> 13 Outubro 2017</h6> 
    <p class="card-text">TEST </p> 
    <a href="#" class="btn btn-primary">TEST</a> 
    </div> 
</div> 

    </div> 

    </section>

來源

2017-10-13 Lucky

嘿，請提供完整的代碼與CSS，HTML和JS –

這裏：https://pastebin.com/UuSWWuHu – Lucky

就這麼，我們希望你嘗試**編寫代碼自己**。後** [做更多的研究]（//meta.stackoverflow.com/questions/261592)**如果你有問題，你可以**發佈你已經嘗試**與清楚的解釋是什麼是'工作**並提供** [最小，完整和可驗證示例]（// stackoverflow.com/help/mcve)**。 – Rob

什麼你想要做的是完全是一個旋轉木馬，只是讓你知道，如果你需要將必須使用比純HTML（更具體的JS和CSS更多），如果您不想知道創建旋轉木馬的詳細信息，則可以始終使用庫如引導程序（https://www.w3schools.com/bootstrap/bootstrap_carousel.asp）或光滑（http://kenwheeler.github.io/slick/）。但是，如果你想創建一個，你將不得不尋找一個教程（網上有很多「傳送帶js css教程」），因爲它有一個漫長的過程。

來源

2017-10-13 18:46:09

僅鏈接僅適用於第三方軟件的答案和建議。這個問題無論如何都是無關緊要的，不應該回答。請不要回答主題問題。回答良好的問題並非所有的問題都可以或應該在這裏得到解答。保存自己的一些挫折，並避免試圖回答的問題...... ......不清楚或缺乏可以唯一識別問題的具體細節。 ...請求意見而不是事實...不要嘗試寫代碼或要求編寫代碼。「https://stackoverflow.com/help/how-to-answer – Rob

這裏是一個香草JS旋轉木馬，你可以看看，它自己滑動，並停止滑動，如果用戶點擊箭頭手動控制。如果你想要顯示多個元素而不僅僅是一個，你可以對此做一些小調整。

//Changed index so 1 is actually first image, rather than starting at 0 index 
 
var index = 1; 
 
var paused = false; 
 
var slideShow = []; 
 

 
for (i=0; i<document.getElementsByClassName("slideShow").length; i++) { 
 
    slideShow[i] = document.getElementsByClassName("slideShow")[i]; 
 
    slideShow[i].style.display = "none"; 
 
} 
 

 
slideShow[0].style.display = "inline"; 
 

 
var slides = setInterval(function() { 
 
    if (index < slideShow.length) { 
 
    index++; 
 
\t \t showDivs(); 
 
    } 
 
    else { 
 
\t \t index = 1; 
 
\t \t showDivs(); 
 
\t } 
 
},1000); 
 

 
function control(n) { 
 
    clearInterval(slides); 
 

 
    if (index+n > slideShow.length) { 
 
    index = 1; 
 
    } 
 
    else if (index+n <= 0) { 
 
    index = slideShow.length; 
 
    } 
 
    else { 
 
\t \t index += n; 
 
    } 
 
    showDivs(); 
 
} 
 

 
function showDivs() { 
 
    //Hide all slideShow elements, and then show only the targeted element 
 
    for (let i=1; i<=slideShow.length; i++) { 
 
    slideShow[i-1].style.display = "none"; 
 
    } 
 
    slideShow[index-1].style.display = "inline"; 
 
}

<button onclick="control(-1)" class="arrows" id="left"><</button> 
 
<p class="slideShow">1</p> 
 
<p class="slideShow">2</p> 
 
<p class="slideShow">3</p> 
 
<p class="slideShow">4</p> 
 
<p class="slideShow">5</p> 
 
<button onclick="control(1)" class="arrows" id="right">></button>

來源

2017-10-13 18:51:22

卡片旋轉木馬

回答

相關問題