一行展示不开的时候，增加左右滑动的功能

img


现在一行展示不开，想去掉x轴滚动条，实现左右滑动的功能，想问下该怎么实现呢

css 样式写一个滚动条隐藏然后 写两个左右按钮控制盒子的scrollLeft左右滑动

您可以通过 CSS 的 white-space 属性和 overflow-x 属性来实现左右滑动的功能。具体来说，将 white-space 属性设置为 nowrap，这样文本就不会自动换行，然后将 overflow-x 属性设置为 scroll 或 auto，这样就可以在水平方向上滚动文本（或图片）。

该回答引用chatgpt:

img



<!DOCTYPE html>
<html>
<head>
    <style>
.container {
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  scrollbar-width: none; /* 去掉滚动条（适用于 Firefox） */
  -ms-overflow-style: none; /* 去掉滚动条（适用于 IE 和 Edge） */
}

.item {
  flex: 0 0 auto;
  width: 300px;
  height: 200px;
  background-color: #ccc;
  margin-right: 10px;
}

/* 鼠标滚轮滚动时隐藏滚动条（适用于 Chrome 和 Safari） */
.container::-webkit-scrollbar {
  display: none;
}

    </style>
</head>
<body>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 添加更多的项目 -->
</div>
</body>
</html>

使用el-carousel，然后用双重for循坏实现按页码进行左右滑动的操作