Bootstrap多项目轮播集成jQuery Zoom功能的问题求助

我帮你把这个Bootstrap多商品轮播+定制Zoom缩放的方案整理完善好了，结合你提到的需求，完整的实现代码和关键细节说明如下：

完整实现代码 #

HTML（结合Liquid模板） #

<div id="ProductCarousel" class="carousel multi-item-carousel slide small--hide" data-bs-ride="carousel">
  <div class="grid grid--no-gutters">
    <div class="carousel-inner">
      {% assign slideIndex = 0 %}
      {% for image in product.images %}
        {% if slideIndex == 0 %}
          <div class="carousel-item {% if forloop.first %}active{% endif %}">
            <div class="grid grid--2-cols">
        {% endif %}
              <div class="product-slide-item">
                <img 
                  src="{{ image.src | img_url: 'medium' }}" 
                  alt="{{ image.alt | default: product.title }}" 
                  class="product-zoom-image"
                  data-large-src="{{ image.src | img_url: 'large' }}"
                >
              </div>
        {% assign slideIndex = slideIndex | plus: 1 %}
        {% if slideIndex == 2 or forloop.last %}
            </div>
          </div>
          {% assign slideIndex = 0 %}
        {% endif %}
      {% endfor %}
    </div>
    <!-- 轮播控制按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#ProductCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#ProductCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

<!-- 缩放模态框 -->
<div class="modal fade" id="ProductZoomModal" tabindex="-1" aria-labelledby="ProductZoomModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-lg-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ProductZoomModalLabel">商品详情放大</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body d-flex justify-content-center align-items-center">
        <img id="ZoomModalImage" src="" alt="" class="img-fluid">
      </div>
    </div>
  </div>
</div>

CSS 定制 #

.multi-item-carousel .carousel-item .grid--2-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.product-slide-item {
  cursor: zoom-in;
}

#ProductZoomModal .modal-body {
  padding: 0;
}

#ZoomModalImage {
  max-height: 80vh;
}

JavaScript（jQuery + Bootstrap + jQuery Zoom） #

$(document).ready(function() {
  // 初始化轮播
  const productCarousel = new bootstrap.Carousel('#ProductCarousel', {
    interval: false, // 关闭自动轮播，按需调整
    wrap: true
  });

  // 定制商品图片点击事件：打开模态框后初始化Zoom
  $('.product-zoom-image').on('click', function(e) {
    e.preventDefault();
    const largeImageSrc = $(this).data('large-src');
    const imageAlt = $(this).attr('alt');

    // 更新模态框内的图片
    $('#ZoomModalImage').attr({
      'src': largeImageSrc,
      'alt': imageAlt
    });

    // 打开模态框
    const zoomModal = new bootstrap.Modal('#ProductZoomModal');
    zoomModal.show();

    // 模态框完全显示后初始化Zoom
    $('#ProductZoomModal').on('shown.bs.modal', function() {
      $('#ZoomModalImage').zoom({
        url: largeImageSrc,
        // 自定义Zoom的配置，比如缩放级别、触发方式等
        magnify: 1.5,
        touch: true
      });
    });

    // 模态框关闭时销毁Zoom实例，避免内存泄漏
    $('#ProductZoomModal').on('hidden.bs.modal', function() {
      $('#ZoomModalImage').trigger('zoom.destroy');
    });
  });
});

关键实现说明 #

• 多项目轮播结构：用Liquid循环将每2张商品图片打包到一个carousel-item里，配合Grid布局实现一行2个项目的展示，同时处理了循环末尾的边界情况（比如商品数量为奇数时的最后一个幻灯片）。
• jQuery Zoom定制：放弃默认的点击直接缩放逻辑，改为先触发模态框，待模态框完全渲染后再初始化Zoom，确保缩放效果在模态框内正常生效。
• 资源清理：在模态框关闭时销毁Zoom实例，避免重复绑定事件导致的性能问题和内存泄漏。
• 响应式适配：模态框使用modal-fullscreen-lg-down类，大屏时保持合适大小，小屏时自动全屏，提升移动端用户体验。

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