javascript - 如何使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。这将启用滚动，因此所有 native 功能(例如双指滑动)都将按照用户期望的方式在他们所在的平台上运行。与以用户意想不到的方式重新设计 UI 组件相比，这是一个更好的解决方案。