卡片旋转木马

-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

卡片旋转木马

回答

相关问题