如何创建水平滚动卡轮播？

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>

Answer 2

我建议您看看slick。这是轻松创建幻灯片的好工具。它还具有动态添加/删除幻灯片的功能。

对于较小的设备，您可以设置要在屏幕上显示的幻灯片数量。 例如：台式机上有4张幻灯片-平板电脑上有2张幻灯片，手机上有1张幻灯片。