Jquery 卡片传送带

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

我用一些卡片制作了这个部分，但我想制作一个菜单之类的东西，我不知道怎么称呼它……就像，我把箭头指向左右，当我点击它时，会出现更多的卡片。我觉得这就像一个旋转木马。但直到现在，我还不能做我想要的。 如下图所示：

试验

试验
13奥图布罗2017
测试
测试
13奥图布罗2017
测试
你要做的正是一个旋转木马，只是为了让你知道你必须使用的不仅仅是纯html（如果需要更具体的JS和css），如果你不想知道创建旋转木马的细节，你可以随时使用库，比如bootstrap（）或slick（）。但是如果你想创建一个，你必须寻找一个教程（网络上有很多“carousel js css教程”），因为这是一个很长的过程。
这里有一个普通的js carousel，你可以看看，它自己滑动，如果用户点击箭头进行手动控制，它就会停止滑动。如果希望显示多个元素而不是一个元素，可以对此进行一些小调整


//已更改索引，因此1实际上是第一个图像，而不是从0索引开始
var指数=1；
var=false；
var幻灯片放映=[]；
对于（i=0；i slideShow.length）{
指数=1；
}
else if（索引+n）
我已经嵌入了可能用于菜单的卡片旋转木马的代码。为了编辑它，转到这里并按照您想要的方式设置样式


嘿，请提供css、html和jshere的完整代码：因此，您需要尝试自己编写代码。如果您有问题，您可以发布您尝试过的内容，并清楚解释哪些内容不起作用，并提供链接。因此，仅允许对第三方软件的答案和建议。此任务无论如何，ion是离题的，不应该回答。请不要回答离题的问题。回答好的问题并不是所有的问题都可以或应该在这里回答。避免自己感到沮丧，避免回答不清楚或缺乏能够唯一识别问题的具体细节的问题……征求观点而非事实……不要试图编写代码或要求为他们编写代码。”
<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>