怎样使多个滑块在滚动时同时水平移动？

要使多个滑块在滚动时同时水平移动，你可以使用JavaScript和CSS来实现。以下是一个示例代码：

HTML：

<div class="slider-container">
  <div class="slider"></div>
  <div class="slider"></div>
  <div class="slider"></div>
</div>

CSS：

.slider-container {
  overflow: auto;
  white-space: nowrap;
}

.slider {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: gray;
  margin-right: 10px;
}

JavaScript：

const sliderContainer = document.querySelector('.slider-container');
const sliders = document.querySelectorAll('.slider');

sliderContainer.addEventListener('scroll', function() {
  sliders.forEach(function(slider) {
    slider.style.transform = `translateX(${sliderContainer.scrollLeft}px)`;
  });
});

在上面的示例中，我们首先使用HTML和CSS创建了一个包含三个滑块的容器。然后，我们使用JavaScript获取滑块容器和所有滑块的元素，并为滑块容器添加了一个滚动事件监听器。

在滚动事件监听器中，我们使用scrollLeft属性获取滑块容器的水平滚动位置，并将其应用于每个滑块的transform样式，通过translateX()函数来实现水平移动。这样，当滑块容器滚动时，所有滑块将同时水平移动。

请注意，滑块容器的overflow属性设置为auto，以便显示滚动条，当滑块内容超出容器时可以滚动。