点击切换主图功能优化：分设预览小图与主图的实现方案咨询

该需求完全可以实现，具体修改方案如下：

1. 调整CSS规则 #

新增主图显隐控制样式，同时修正原有CSS的拼写错误（heigh改为height）：

.custom-carousel {
  text-align: center;
}
/* 主图默认隐藏，激活态才显示 */
.main-image > img {
  display: none;
  /* 可根据需求修改主图实际展示尺寸 */
  width: 300px;
}
.main-image > img.active {
  display: block;
}
.img-to-select > .img-to-select__item > img {
  height:30px;
  width: 30px;
}
.img-to-select {
  overflow: hidden; 
  display: flex; 
  justify-content:space-around;
  margin-top: 10px;
}
.img-to-select > .img-to-select__item {
   display: flex; 
   justify-content:space-around;
   padding: 2px;
}
.img-to-select > .img-to-select__item.selected {
   border: 2px solid red;
}

2. 调整HTML结构 #

给默认选中的第一张主图添加active类，同时按需修改各主图的data-title为对应内容：

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="custom-carousel__title">
        <span>image-a</span>
      </div>
      <div class="main-image">
        <img src="main-test-1.jpg" alt="" data-title="image-a" class="active">
        <img src="main-test-2.jpg" alt="" data-title="image-b">
        <img src="main-test-3.jpg" alt="" data-title="image-c">
        <img src="main-test-4.jpg" alt="" data-title="image-d">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="preview-test-1.jpg" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="preview-test-2.jpg" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="preview-test-3.jpg" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="preview-test-4.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

3. 修改JS交互逻辑 #

通过预览项和主图的索引一一对应，实现点击切换：

$('.img-to-select__item').click(function () {
  // 更新预览项选中状态
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  // 获取当前点击预览项的索引
  const currentIndex = $(this).index();
  // 切换对应主图的显示状态
  $('.main-image > img').removeClass('active').eq(currentIndex).addClass('active');
  // 同步更新标题
  $('.custom-carousel__title > span').html($('.main-image > img').eq(currentIndex).attr('data-title'));
});

如果后续预览项和主图的排列顺序可能发生变动，也可以给预览图和主图添加相同的自定义标识属性（比如data-img-id），点击时通过属性匹配对应主图即可，匹配逻辑更稳定。

内容的提问来源于stack exchange，提问作者chu