转载说明：原创不易，未经授权，谢绝任何形式的转载
最近我正在一个项目上工作，需要实现一个幻灯片/轮播。我在网上搜索了一下，但没有找到具有我需要的功能或者还要装一些插件，所以，我想自己创建一个，方便自己使用。
这是一个示例：
让我们为轮播创建基本的HTML结构。
- 创建一个类为container的div。
- 在此div中创建另一个类为carousel-vIEw的div。一个用于幻灯片向左滚动的按钮。一个带有类item-list的幻灯片项目容器。一个用于幻灯片向右滚动的按钮。
<div class="container">
<div class="carousel-view">
<!-- 向左按钮 -->
<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;
}
/* 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
结束到这里，本案例就介绍到这里，建议大家还是亲自实践下，才能印象深刻。感谢你的阅读。
文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多有需要的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。
原文：https://medium.com/@algopoint.ltd/how-to-create-a-slideshow-carousel-using-html-css-js-7ab0561b39b3
作者：AlgoPoint
非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正
