Bootstrap 5 Modal轮播点击对应图片后无法显示正确图片问题咨询

问题原因 #

你遇到的情况属于Bootstrap组件默认逻辑的正常表现，不属于代码bug，只需要补充少量JS逻辑即可解决。
Bootstrap自带的data-bs-toggle="modal"属性仅负责触发modal的显示/隐藏，不会自动关联点击的缩略图和modal内嵌轮播的当前展示项。轮播组件的状态是全局持久化的，关闭modal时不会自动重置，下次打开时就会保留上一次的展示位置，默认打开时则会显示初始设置的第一张active轮播项。

解决方案 #

步骤1：修改HTML触发标签

给所有触发modal的<a>标签添加自定义属性data-slide-index，属性值和对应的轮播项下标一一对应（下标从0开始计数），修改后的完整HTML代码如下：

<main class="row">
  <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
    <a data-bs-toggle="modal" data-bs-target="#exampleModal" data-slide-index="0">
      <div class="card">
        <img src="https://images.unsplash.com/photo-1622222298089-042b5e973333?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=632&q=80" alt="">
      </div>
    </a>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
    <a data-bs-toggle="modal" data-bs-target="#exampleModal" data-slide-index="1">
      <div class="card">
        <img src="https://images.unsplash.com/photo-1622227614434-a7a26021879f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="d-block w-100" alt="...">
      </div>
    </a>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
    <a data-bs-toggle="modal" data-bs-target="#exampleModal" data-slide-index="2">
      <div class="card">
        <img src="https://images.unsplash.com/photo-1622115168398-af384a2b4d85?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" class="d-block w-100" alt="...">
      </div>
    </a>
  </div>

  <!-- 原有modal和轮播代码不需要修改 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://images.unsplash.com/photo-1622222298089-042b5e973333?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=632&q=80" alt="">
            </div>
            <div class="carousel-item">
              <img src="https://images.unsplash.com/photo-1622227614434-a7a26021879f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://images.unsplash.com/photo-1622115168398-af384a2b4d85?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" class="d-block w-100" alt="...">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</main>

步骤2：补充JS逻辑

新增如下JS代码，监听modal的显示事件，拿到当前点击的缩略图对应的轮播下标，调用轮播组件的方法切换到对应位置即可（以下为Bootstrap 5版本代码）：

const exampleModal = document.getElementById('exampleModal')
const carousel = new bootstrap.Carousel(document.getElementById('carouselExampleControls'))

exampleModal.addEventListener('show.bs.modal', function (event) {
  // 获取触发modal打开的元素
  const trigger = event.relatedTarget
  // 获取自定义的轮播下标
  const slideIndex = trigger.getAttribute('data-slide-index')
  // 切换轮播到对应位置
  carousel.to(slideIndex)
})

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