如何在div向右溢出时隐藏div内容

Question

我有上面的图片，我需要用CSS和JavaScript实现效果;在我的页面上，我允许用户在他们的帐户中添加最多12张图片，所有图片都将显示在下面的div中。

如果用户少于5张照片，则会隐藏带红色边框的div，当用户有超过5张照片时，带有红色边框的div将显示2个箭头 - 一个在左边，另一个在右侧 - 单击右箭头，照片将向左移动，直至到达最后一张照片。

如何使用CSS和JavaScript实现这一目标？我试图使用为div隐藏的溢出，但我得到的不是我需要的。

对任何人有任何帮助吗？

我的HTML和CSS如下：

.mycarousel-container {
  border: 1px solid red;
  width: 650px;
  min-height: 140px;
  max-height: auto;
  overflow-x: hidden;
  position: relative;
  left: 0px;
  z-index: 0;
}
#carousel_control_left {
  float: left;
  margin-top: 60px;
  color: #b0b0b0;
  font-size: 18px;
}
#carousel_control_right {
  float: right;
  margin-top: 60px;
  color: #b0b0b0;
  font-size: 18px;
}
.mycarousel {
  border: 1px solid #ccc;
  width: 102px;
  height: 102px;
  margin: 15px 15px 15px 4px;
  float: left;
  border-radius: 2px;
}

<div class="row">
  <div class="col-md-12">
    <div><small class="text-muted">This listing has 6 photos. Add up to 6 more for free.</small>
    </div>
    <div class="mycarousel-container" style="padding-left:0;padding-right:0;">
      <span id="carousel_control_left"><i class="glyphicon glyphicon-chevron-left"></i></span>
      <span id="carousel_control_right"><i class="glyphicon glyphicon-chevron-right"></i></span>
      <div class="mycarousel">
        <img src="1465929515_Money.png" class="img img-thumbnail">
      </div>
      <div class="mycarousel">
        <img src="1465929515_Money.png" class="img img-thumbnail">
      </div>
      <div class="mycarousel">
        <img src="1465929515_Money.png" class="img img-thumbnail">
      </div>
      <div class="mycarousel">
        <img src="1465929515_Money.png" class="img img-thumbnail">
      </div>
      <div class="mycarousel">
        <img src="1465929515_Money.png" class="img img-thumbnail">
      </div>
    </div>
  </div>
</div>

指向jsFiddle

的链接

Answer 1

我可以建议不添加这两个箭头并让浏览器为您完成工作吗？

只需在包含div上设置overflow-x: auto即可。这将启用滚动功能，因此所有本机功能（例如双指滑动）将以用户对其所在平台所期望的方式工作。这是一种比用户不期望的方式重新构建UI组件更好的解决方案。