在页面制□□□□作中，我们可以□□□□使用原生 JavaScript 构建一个•非常简单□□□□的轮播（或“滑块”）。
这种实现□□对于基本□□网站来说□□□是完美的，它也是一□□□种以体面丨的方式显□□□□示内容的□□高性能方□□□□式。一旦你构□□建了这些※幻灯片，你就可以□□□向它们添□□□加任何你□□□□想要的内□□容；文字，图像，视频，你的名字。
如下图所示构建的简单的彩色轮播：

1. 先构建html，放置左右按钮和每一屏显示的内容，如下所示：
<section class="slider-wrapper">
<ul class="slides-container" id="slides-container">
<li class="slide" style="background-color: #49b293;">Slide 1</li>
<li class="slide" style="background-color: #b03532;">Slide 2</li>
<li class="slide" style="background-color: #6a478f;">Slide 3</li>
<li class="slide" style="background-color: #da6f2b;">Slide 4</li>
</ul>
<button class="slide-arrow" id="slide-arrow-prev">
     <img src="images/arrow_left.jpg"/>
   </button>
<button class="slide-arrow" id="slide-arrow-next">
     <img src="images/arrow_right.jpg"/>
   </button>
</section>
2.设置css轮播的样□□□□式，首先设置slider-wrapper,slides-container和slide类的样式，父级div.slider-wrapper要设置 overflow: hidden，幻灯片的div.slides-container要设置overflow: scroll;和display: flex，使其在一□□行上显示□□所有的轮•播内容，而且overflow: scroll可以允许□□□用户手动※切换轮播，使其可拖☆动，还有一个◥重要属性□□□□是scroll-behaviour，这是允许□□□容器平滑◤滚动到下□□□一张幻灯□□□片而不是□□□□立即移动□□□□的属性。类名div.slide-arrow是设置左□□□□右切换按□□□□钮的样式。如下所示：
.slider-wrapper { margin: 100px; position: relative; overflow: hidden; }
.slides-container { height: calc(100vh - 200px); width: 100%; display: flex; overflow: scroll; scroll-behavior: smooth; list-style: none; margin: 0; padding: 0; }
.slide-arrow { position: absolute; display: flex; top: 0; bottom: 0; margin: auto; height: 50px; background-color: white; border: none; width: 50px; padding: 0; cursor: pointer; opacity: 0.5; transition: opacity 100ms; }
.slide-arrow:hover, .slide-arrow:focus { opacity: 1; }
#slide-arrow-prev { left: 0;}
#slide-arrow-next { right: 0;}
.slide { width: 100%; height: 100%; flex: 1 0 100%; }
需要注意的是，如果不需要滚动条，则需要额外设置：
.slides-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
/* WebKit */
.slides-container::-webkit-scrollbar {
    width: 0;
    height: 0;
}

• 使用 JavaScript 添加滑块□□□□功能，滑块功能□□□□涉及两部□□□□分逻辑，分别是单□□击前进箭□□□头时显示△下一屏内◉容，单击后退□□□□箭头时显□□□□示上一屏★内容，先要获取□□□□滑块的所□□□□有元素，然后将点□□□击事件监□□□□听器添加□□□□到下一个□□□□按钮，当按钮被□□□□点击时，得到一张丨幻灯片的□□□宽度值，通过增加□□□的scrollLeft属性，稍作调整□□就可以将□□□□相同的逻□□辑应用于◤后退箭头◉按钮，不过使用□□这种方法，不是添加▲到scrollLeft属性中，而是减去□□幻灯片的□□□宽度，这样就可□□以在按下❖后退箭头◈时向后移☆动了。

如下所示：
const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");
nextButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft += slideWidth;
});
prevButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft -= slideWidth;
});