Javascript 在手机上的div中可滑动水平滚动

所以我有一个页面，在那里我有一个主图像框，在它下面我有缩略图。 当用户单击缩略图时，主图像框将图像更改为单击的缩略图中显示的图像。像旋转木马一样见下图。

现在，我的问题是，如果用户要添加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的组合，但我不知道如何开始

---

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

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

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

然后，对于每个缩略图，具有以下内容：

display:inline-block;

.container{
背景色：红色；
高度：100px；
宽度：计算（100%-40px）；
利润率：10px；
溢出-x：滚动；
填充：10px；
空白：nowrap；
}
.缩略图{
背景颜色：蓝色；
显示：内联块；
身高：100%；
宽度：30%；
}
.缩略图像{
身高：100%；
宽度：100%；
}

---

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

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

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

然后，对于每个缩略图，具有以下内容：

display:inline-block;

.container{
背景色：红色；
高度：100px；
宽度：计算（100%-40px）；
利润率：10px；
溢出-x：滚动；
填充：10px；
空白：nowrap；
}
.缩略图{
背景颜色：蓝色；
显示：内联块；
身高：100%；
宽度：30%；
}
.缩略图像{
身高：100%；
宽度：100%；
}