最近我正在一个项目上工作，需要实现一个幻灯片/轮播。我在网上搜索了一下，但没有找到具有我需要的功能或者还要装一些插件，所以，我想自己创建一个，方便自己使用。

这是一个示例：

HTML
让我们为轮播创建基本的HTML结构：
1.创建一个类为container的div。
2.在此div中创建另一个类为carousel-view的div。一个用于幻灯片向左滚动的按钮。一个带有类item-list的幻灯片项目容器。一个用于幻灯片向右滚动的按钮。

<div class="container">
  <div class="carousel-view">
    <!-- 堆代码 duidaima.com -->
    <!-- 向左按钮 -->
    <button id="prev-btn" class="prev-btn"> </button>

    <!-- 项目容器 -->
        <div id="item-list" class="item-list">
          <!-- 项目 -->
          <img id="item" class="item" src="image-url"/>
          <img id="item" class="item" src="image-url"/>
        </div>

    <!-- 向右按钮 -->
        <button id="next-btn" class="next-btn"> </button>
    </div>
  </div>

CSS
现在，我们来到CSS部分。首先，我们需要做一些基础设置。以下图像说明了CSS的基础结构。

现在让我们看看这个Item-list。由于它是一个水平幻灯片，我们需要水平对齐项目，为此有多种方法，但我选择使用display:flex属性，因为它还可以让我在项目之间添加间距。

所以，基本上我们在这里有一个容器，其中具有可滚动溢出的项目列表，窗口中需要显示的项目数由幻灯片的宽度确定。
现在，让我们谈谈我们在这里使用的神奇咒语。

.item-list{
    ...
    scroll-snap-type: x mandatory;
}

.item{
...
    scroll-snap-align: center;
}

此属性用于控制项目的滚动。我们想要实现的效果是确保一个图片元素要么完全在窗口左侧，要么完全在窗口左侧外。要创建垂直滑块，您可以使用scroll-snap-type: y mandatory。您可以在此处了解有关scroll-snap属性的更多信息。

scroll-snap-type: x mandatory;：这个属性告诉浏览器，当用户滚动一个横向的容器时，需要对容器内的元素进行“捕捉”。x表示只对横向滚动进行捕捉，mandatory表示在滚动结束时一定会进行捕捉，而不是只在用户松开鼠标/手指时才进行捕捉。

scroll-snap-align: center;：这个属性告诉浏览器，在进行捕捉时，需要将滚动位置捕捉到最接近的元素的中心位置。也可以使用其他值，如start（将滚动位置捕捉到最接近的元素的起始位置）和end（将滚动位置捕捉到最接近的元素的末尾位置）等。

这些属性可以极大地改善用户体验，特别是在移动设备上。例如，在一个横向的轮播图或相册中，用户可以通过滚动来查看更多的内容。如果不使用滚动捕捉，用户可能很难找到最接近的元素，而且可能无法对其进行浏览。通过使用这些属性，浏览器可以自动将滚动位置捕捉到最接近的元素，使用户体验更加流畅和自然。
提示：要隐藏滚动条但保留功能，我们可以这样做

/* 隐藏Chrome、Safari和Opera的滚动条 */
.item-list::-webkit-scrollbar {
  display: none;
}

/* 隐藏IE、Edge和Firefox的滚动条 */
.item-list {
  -ms-overflow-style: none;  /* IE和Edge */
  scrollbar-width: none;  /* Firefox */
}

以下是完整的CSS代码

button{
    border: none;
    cursor: pointer;
    color: white;
    background: none;
    transition: all .3s ease-in-out;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.carousel-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 44px 0;
  transition: all 0.25s ease-in;
}

.carousel-view .item-list {
  max-width: 950px;
  width: 70vw;
  padding: 50px 10px;
  display: flex;
  gap: 48px;
  scroll-behavior: smooth;
  transition: all 0.25s ease-in;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow: auto;
  scroll-snap-type: x mandatory;
}

/* 堆代码 duidaima.com */
/* Hide scrollbar for Chrome, Safari and Opera */
.item-list::-webkit-scrollbar {
  display: none;
}

.prev-btn {
  background = none;
  cursor: pointer;
}

.next-btn {
  cursor: pointer;
}

.item {
  scroll-snap-align: center;
  min-width: 120px;
  height: 120px;
  background-color: deeppink;
  border-radius:8px;
}

JavaScript
现在是时候实现按钮的功能了：使用document.getElementById()函数从文档中获取nextButton、prevButton和itemList对象。
现在实现单击时的项目滚动，使用eventListener。

const prev = document.getElementById('prev-btn')
const next = document.getElementById('next-btn')
const list = document.getElementById('item-list')
const itemWidth = 150
const padding = 10

prev.addEventListener('click',()=>{
  list.scrollLeft -= (itemWidth + padding)
})
next.addEventListener('click',()=>{
  list.scrollLeft += (itemWidth + padding)
})

每当用户与按钮交互时，它的addEventListener将被触发，并且传递事件类型click确保回调函数仅在单击时执行。
现在，在回调函数中，我们正在减小和增加scrollLeft属性的值，以向右和向左滑动itemList。
以下是幻灯片的完整代码和演示：
https://codepen.io/mohitsharma0101/pen/WNJJzwM
结束
到这里，本案例就介绍到这里，建议大家还是亲自实践下，才能印象深刻。感谢你的阅读。