css 横向滑动 pc端

在CSS中，实现PC端的横向滑动通常通过`<div>`元素配合CSS的`position`, `transform`, 和 `transition` 属性来完成，特别是当涉及到响应式设计时。以下是一个基本的例子：

<div class="slider-container">
  <div class="slide" style="transform: translateX(-100%); transition: transform 0.5s ease;">
    <!-- slide 1内容 -->
  </div>
  <div class="slide" style="transform: translateX(0);">
    <!-- slide 2内容 -->
  </div>
  <div class="slide" style="transform: translateX(100%);">
    <!-- slide 3内容 -->
  </div>
</div>

然后在CSS中设置样式：

.slider-container {
  overflow-x: auto; /* 开启水平滚动 */
  white-space: nowrap; /* 防止换行 */
}

.slide {
  width: 25%; /* 根据需要调整宽度 */
  display: inline-block;
}

当你想要滑动时，可以使用JavaScript或者jQuery来添加`scrollLeft`属性或者切换`.slide`的`transform`值，模拟滑动效果。