javascript - 为移动设备上的弹性项目添加滑动功能

Question

我有一个简单的 flex 容器，其中 3 个项目彼此相邻，在移动版本上，我想保持相同的布局，而不是将 flex 方向更改为列，我想将它们放在旁边以教其他人并添加滑动以查看下一个项目

图像示例

在桌面上（这很好，我知道该怎么做）

在移动设备上（我想让它们彼此相邻并在屏幕上滑动以查看下一个项目）

html

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>

css

.parent {
  width: 98vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.child {
  width: 33%;  
  height: 500px;
  background: black;
}

真实例子 https://mouthwash.co/

在桌面上

在手机上（所以我必须滑动才能看到其他项目）

标签： javascripthtmlcss