css - 如何创建水平滚动的卡片轮播？

Question

我在创建这个时遇到了困难。调整屏幕大小时，卡片会自动换行。我试图将溢出设置为隐藏，但这没有帮助

这是我目前所拥有的:

.showcase-section{
  height:40vh;
  text-align:center;
  padding:2rem;
}
.showcase__carousel--container{
  padding:2rem;
  height:30rem;
  width:65%;
  margin-left:auto;
  margin-right:auto;

}
.showcase__carousel--content{
  overflow:hidden;
}
.showcase__carousel--item{
  height:15rem;
  width:12rem;
  background-color:whitesmoke;
  border-radius:5px;
  box-shadow:0 0 3px rgba(0,0,0,.5);
  margin-left:2rem;
  margin-right:2rem;
  display:inline-block;
}

<section class="showcase-section">
<h2 style="font-size:3rem;">Showcase</h2>
<div class="showcase__carousel--container">
  <i class="fa fa-chevron-left" style="font-size:10rem; display:inline-block; float:left;"></i>
  <div class="showcase__carousel--content">
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>

  <i class="fa fa-chevron-right" style="font-size:10rem; display:inline-block; float:right;"></i>
  </div>
  </div>
</section>

Answer 1

您可以在 css 中使用 FlexBox。 .showcase__carousel--content 的以下代码将阻止将内容附加到换行符。

您可以测试 dynamic nature here

.showcase__carousel--content {
    display: flex;
    flex-flow: row nowrap;
}

.showcase-section{
  height:40vh;
  text-align:center;
  padding:1rem;
}
.showcase__carousel--container{
  padding:1rem;
  height:30rem;
  width:65%;
  margin-left:auto;
  margin-right:auto;

}
.showcase__carousel--content{
  overflow:hidden;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.showcase__carousel--item{
  height:12rem;
  flex: 0 0 12rem;
  background-color:whitesmoke;
  border-radius:5px;
  box-shadow:0 0 3px rgba(0,0,0,.5);
  margin:0 1rem;
  display:inline-block;
}

<section class="showcase-section">
<h2 style="font-size:3rem;">Showcase</h2>
<div class="showcase__carousel--container">
  <i class="fa fa-chevron-left" style="font-size:10rem; display:inline-block; float:left;"></i>
  <div class="showcase__carousel--content">
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>
    <div class="showcase__carousel--item">
    ..
    </div>

  <i class="fa fa-chevron-right" style="font-size:10rem; display:inline-block; float:right;"></i>
  </div>
  </div>
</section>