在頁面制作中，我們可以使用原生 JavaScript 構建一個非常簡單的輪播（或“滑塊”）。
這種實現(xiàn)對于基本網(wǎng)站來說是完美的，它也是一種以體面的方式顯示內容的高性能方式。一旦你構建了這些幻燈片，你就可以向它們添加任何你想要的內容；文字，圖像，視頻，你的名字。
如下圖所示構建的簡單的彩色輪播：

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 添加滑塊功能，滑塊功能涉及兩部分邏輯，分別是單擊前進箭頭時顯示下一屏內容，單擊后退箭頭時顯示上一屏內容，先要獲取滑塊的所有元素，然后將點擊事件監(jiān)聽器添加到下一個按鈕，當按鈕被點擊時，得到一張幻燈片的寬度值，通過增加的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;
});