CSS Grid图片画廊布局与分组轮播切换问题求助

我是个前端新手，现在做图片画廊遇到了两个棘手的问题，想请大家帮忙看看：

• 我希望主图下方只固定显示6张图片（也就是仅一行6张），但总图片数量要超过6张。目前的问题是，只要新增图片就会自动换行，我只想保留两行布局：一行主图，一行固定6张缩略图。
• 如何让下方的缩略图实现分组轮播？也就是每次只展示6张，用户点击切换按钮时，当前这6张隐藏，加载下一组6张；到最后一组后能循环回到第一组，反向切换也同理。这个问题我完全没头绪，要是能给我指个方向就太感谢了！

我试过先添加所有图片，再用overflow:hidden隐藏多余的（想先把布局问题搞定再写JS），但没达到想要的效果。

下面是我目前的代码：

CSS代码 #

html {
  font-size: 62.5%;
  box-sizing: border-box;
  /* font-family: "Montserrat", sans-serif; */
}

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  background-color: #e9e9e9;
}

figure {
  display: block;

  margin: 0;
  padding: 0;

  height: 100%;
  width: 100%;
}

.grid {
  display: grid;

}

.grid__gallery {
  max-width: 100%;

  padding: .5rem;

  margin-left: 2rem;
  margin-right: 2rem;

  column-gap: 0.4rem;
  row-gap: 0.1rem;

  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;

}

.main__image {
  position: relative;
  width: 100%;
  color: white;
  background-color: #444;

  height: 50rem;


  grid-column: 1 / -1;

  /* this will helps changing the photo */
  /* by selecting the url of one of the photos under the  main slide and passing it in the background image of this css */
  background-image: url("");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.image {
  max-width: 100%;
  width: 100%;

  cursor: pointer;
  transition: 0.1s ease;


  background-color: #333;
  border: 1px solid green;
  height: 15rem;
}

.slide:active {
  cursor: pointer;
  transform: scale(0.995);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.041);
}

.slider-arrow {
  font-size: 3rem;
  position: absolute;
  cursor: pointer;
  padding: 1rem;
  border-radius: 10%;

  transition: 0.3s ease;
  border: 0.1rem solid transparent;
  outline: none;
}

.slider-arrow:active {
  font-size: 2.8rem;
}

.slider-arrow:hover {
  border: 0.1rem solid #fff;
}

.left-arrow {
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}

.right-arrow {
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

HTML代码 #

<div class="grid grid__gallery">
  <div class="main__image">
    <div class="left-arrow slider-arrow">&larr;</div>
    <div class="right-arrow slider-arrow">&rarr;</div>
  </div>
  <figure class="image slide__1"><img src="" alt="1" /></figure>
  <figure class="image slide__2"><img src="" alt="2" /></figure>
  <figure class="image slide__3"><img src="" alt="3" /></figure>
  <figure class="image slide__4"><img src="" alt="4" /></figure>
  <figure class="image slide__5"><img src="" alt="5" /></figure>
  <figure class="image slide__6"><img src="" alt="6" /></figure>
</div>

备注：内容来源于stack exchange，提问作者dnkratos