点击切换主图区块集成站点数据及预览主图适配问题

一、修复多主图与默认选中问题 #

错误原因是你把main-image放在循环里导致生成多个主图节点，同时所有缩略图都硬编码了selected类。用Blade的$loop变量判断是否是第一个元素即可：仅保留1个主图节点，默认渲染第一张主图，仅给第一个缩略图加选中态。

二、修复缩略图/主图路径混淆问题 #

给缩略图的img标签新增data-main-src自定义属性存储对应主图地址，修改JS逻辑读取该属性赋值给主图，不要直接读取缩略图的src属性。

修改后的Blade模板代码 #

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="custom-carousel__title">
        <span>
          Title
        </span>
      </div>
      <!-- 仅保留1个主图节点，默认取第一张图的主图地址 -->
      <div class="main-image">
        @if(!empty($article_block_images))
        <img src="{{ $article_block_images[0]->main_image }}" 
             alt="{{ $article_block_images[0]->image_alt }}" 
             title="{{ $article_block_images[0]->image_title }}" 
             data-title="{{ $article_block_images[0]->title }}">
        @endif
      </div>
      <div class="img-to-select">
        @if(!empty($article_block_images)) 
        @foreach($article_block_images as $article_block_image)
        <!-- 仅第一个缩略图加selected类，缩略图用preview_image，新增data-main-src存主图地址 -->
        <div class="img-to-select__item {{ $loop->first ? 'selected' : '' }}">
          <img src="{{ $article_block_image->preview_image }}" 
               alt="{{ $article_block_image->image_alt }}" 
               title="{{ $article_block_image->image_title }}" 
               data-title="{{ $article_block_image->title }}"
               data-main-src="{{ $article_block_image->main_image }}">
        </div>
        @endforeach 
        @endif
      </div>
    </div>
  </div>
</div>

修改后的JS代码 #

$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  // 读取缩略图的data-main-src属性赋值给主图，不用缩略图自身的src
  $('.main-image > img').attr('src', $(this).children('img').attr('data-main-src'));
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

原有CSS代码无需修改

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