卡片旋转木马

Question

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

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

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

Answer 1

你要做的只是一个旋转木马，只是你知道如果你不想知道创建的细节，你将不得不使用超过纯HTML（更具体的JS和css，如果需要）您可以随时使用 bootstrap （https://www.w3schools.com/bootstrap/bootstrap_carousel.asp）或光滑（http://kenwheeler.github.io/slick/）等库。但是如果你想创建一个教程，你将不得不寻找一个教程（在网络上有许多“carousel js css教程”），因为它是一个漫长的过程。

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>

Answer 3

我已经嵌入了可用于菜单的卡轮播的代码。为了对其进行编辑，请转到link并按照您想要的方式对其进行样式设置

<iframe width="560" height="315" src="https://mdbootstrap.com/api/snippets/embed/2534680/fullscreen" frameborder="0"></iframe>