如何保持缩略图的内联，使其在一行中，并使用按钮从一个移动到另一个

.thumbnail-container {
  display: flex;
  flex-wrap: nowrap; /* 防止换行 */
  overflow-x: auto; /* 横向滚动条 */
}
.thumbnail {
  flex: 0 0 auto; /* 不伸缩，固定宽度 */
  margin-right: 10px; /* 缩略图之间的间距 */
}

var thumbnailContainer = document.querySelector('.thumbnail-container');
var prevButton = document.querySelector('.prev-button');
var nextButton = document.querySelector('.next-button');

prevButton.addEventListener('click', function() {
  thumbnailContainer.scrollLeft -= thumbnailContainer.offsetWidth;
});

nextButton.addEventListener('click', function() {
  thumbnailContainer.scrollLeft += thumbnailContainer.offsetWidth;
});

<div class="thumbnail-container">
  <img class="thumbnail" src="thumbnail1.jpg" alt="Thumbnail 1">
  <img class="thumbnail" src="thumbnail2.jpg" alt="Thumbnail 2">
  <img class="thumbnail" src="thumbnail3.jpg" alt="Thumbnail 3">
  <!-- 更多缩略图 -->
</div>

<button class="prev-button">Previous</button>
<button class="next-button">Next</button>