请帮助！！！多行轮播CSS网格

Question

我正在尝试使用下面的链接创建一个像CSS网格以及JavaScript一样的滑块，但对如何做却一无所知。它应该有4张卡片或带有一些文本的照片，可以分别单击它们并链接到另一个网页，但是应该有箭头，一次可以看到其中的四个图像，然后滑动到其他四个图像。我尝试使用Bootstrap，但由于我不能在同一转盘上有两行，所以它不起作用，而且我不喜欢它，因为我无法在设计中放入所需的精确填充尺寸。如果有人可以帮助我，我将非常感激！是否有可能做到这一点？非常感谢！

Slideshow Design

Answer 1

据我所知，我可以给您一些CSS，仅此而已，对不起。

<style type="text/css">
.content,
.content1,
.content2,
.content3 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div,
.content1 div,
.content2 div,
.content3 div {
    height: 50%;
    width: 300px;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}
.yellow {
    background: yellow;
}
/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}
</style>


<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
  <div class="yellow">4</div>
</div>

这是flex wrap css;它需要进入容器div（具有设置的高度和宽度），以将其强制为两行。

我知道这不是全部，但是您可以用JS等工具解决它，一旦确定了JS中的哪个框并为其指定ID，就可以设置填充字段或其他内容。

希望您能得到水果，祝您好运！