移动设备中div的可滑动水平滚动

Question

因此，我有一个页面，其中有一个主图像框架，在它下面有缩略图。 当用户单击缩略图时，主图像框会将图像更改为单击的缩略图中显示的图像。 像旋转木马。 参见下图。

现在，我的问题是，如果用户将添加20个缩略图，我不想全部显示。 我希望缩略图始终只显示3，并且可以在移动设备上滑动，因此您可以水平滚动并浏览缩略图。

所以说我的代码是：

<div class="main-image-frame">
   <img src="img.jpg">
</div>
<div class="thumbnail-container">
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
</div>

如何在移动设备中使其水平滚动和滑动？ 我猜是CSS和js的结合，但是我不知道如何开始

Answer 1

无需使用JavaScript。 可以使用CSS来完成。

将容器设置为固定宽度，并为其指定两个重要属性：

overflow-x:scroll;
white-space:nowrap;

然后，对于每个缩略图，请执行以下操作：

display:inline-block;

 .container { background-color:red; height:100px; width:calc(100% - 40px); margin:10px; overflow-x:scroll; padding:10px; white-space: nowrap; } .thumbnail { background-color:blue; display:inline-block; height:100%; width:30%; } .thumbnail img { height:100%; width:100%; } 

 <div class="container"> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> </div>