卡片轮播答案

【问题标题】：Carousel of cards卡片轮播
【发布时间】：2020-09-25 13:58:46
【问题描述】：

我不知道如何命名我的问题，所以我很抱歉标题。

我用一些卡片制作了这个部分，但我想制作菜单之类的东西，我不知道如何称呼它......就像，我把箭头指向左右，当我点击它时，出现更多卡片。我认为它就像一个旋转木马。但直到现在我都无法做出我想要的。喜欢这张图片：

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

【问题讨论】：

嘿，请提供完整的css、html和js代码
这里：pastebin.com/UuSWWuHu
在 SO 上，您应该尝试自己编写代码。在 doing more research 之后，如果您遇到问题，您可以发布您尝试过的内容，并提供对无效内容的明确解释并提供一个 Minimal, Complete, and Verifiable example.

标签： jquery css html bootstrap-4

【解决方案1】：

你想要做的正是一个轮播，只是为了让你知道你将不得不使用更多的纯 html（如果需要更具体的 JS 和 css），如果你不想知道创建的细节一个轮播，您可以随时使用 bootstrap (https://www.w3schools.com/bootstrap/bootstrap_carousel.asp) 或 slick (http://kenwheeler.github.io/slick/) 等库。但是如果你想创建一个，你将不得不寻找一个教程（网上有很多“carousel js css tutorial”），因为它是一个漫长的过程。

【讨论】：

不允许在 SO 上仅链接第三方软件的答案和建议。无论如何，这个问题是题外话，不应该回答。请不要回答离题的问题。回答问得好问题并非所有问题都可以或应该在这里回答。省去一些挫败感，避免尝试回答那些......不清楚或缺乏可以唯一识别问题的具体细节的问题。 ...征求意见而不是事实...不要尝试编写代码或要求为他们编写代码。”stackoverflow.com/help/how-to-answer

【解决方案2】：

这是一个您可以查看的香草 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++;
		showDivs();
  }
  else {
		index = 1;
		showDivs();
	}
},1000);

function control(n) {
  clearInterval(slides);

  if (index+n > slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
		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>

【讨论】：

【解决方案3】：

我已经嵌入了可用于菜单的卡片轮播代码。为了编辑它去这个link并按照你想要的方式设置它

&lt;iframe width="560" height="315" src="https://mdbootstrap.com/api/snippets/embed/2534680/fullscreen" frameborder="0"&gt;&lt;/iframe&gt;

【讨论】：