如何在Vue.js中使用Bootstrap Carousel实现轮播功能

你的轮播无法显示内容有两个核心原因：

1. Bootstrap轮播要求第一个轮播项必须带有active类才能默认渲染显示，你用v-for生成的所有carousel-item都没有添加该类，所有轮播项默认处于隐藏状态，因此看不到内容
2. 你写死了3个轮播指示器，但pictures数组中只有2条数据，数量不匹配会导致后续交互报错

修改后完整代码 #

<template>
    <!-- Start Banner Hero -->
    <div
      id="webshop-hero-carousel"
      class="carousel slide"
      data-bs-ride="carousel"
    >
      <ol class="carousel-indicators">
        <!-- 动态生成指示器，和轮播项数量匹配 -->
        <li
          v-for="(picture, index) in pictures"
          :key="'indicator-' + picture.id"
          data-bs-target="#webshop-hero-carousel"
          :data-bs-slide-to="index"
          :class="{ active: index === 0 }"
        ></li>
      </ol>
      <div class="carousel-inner">
        <div 
          class="carousel-item" 
          v-for="(picture, index) in pictures" 
          :key="'picture-' + picture.id"
          :class="{ active: index === 0 }"
        >
          <div class="container">
            <div class="row p-5">
              <div class="col-lg-6 mb-0 d-flex align-items-center">
                <div class="text-align-left align-self-center">
                  <!-- <h1 class="h1 text-success"><b>Jassa</b> eCommerce</h1> -->
                  <h3 class="h2">{{picture.text}}</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a
        class="carousel-control-prev text-decoration-none w-auto ps-3"
        href="#webshop-hero-carousel"
        role="button"
        data-bs-slide="prev"
      >
        <i class="fas fa-chevron-left"></i>
      </a>
      <a
        class="carousel-control-next text-decoration-none w-auto pe-3"
        href="#webshop-hero-carousel"
        role="button"
        data-bs-slide="next"
      >
        <i class="fas fa-chevron-right"></i>
      </a>
    </div>
    <!-- End Banner Hero -->
</template>
<script>
export default {
  data() {
    return {
      pictures: [
        {
          id: 1,
          text: "Freibad",
        },
        {
          id: 2,
          text: "Hallenbad",
        },
      ],
    };
  },
};
</script>

额外排查项 #

如果修改完成后仍无法正常轮播，确认两点：

• 项目中已正确引入Bootstrap 5的bootstrap.bundle.min.js文件，该文件自带popper依赖不需要额外引入
• Font Awesome资源已正确引入，否则左右切换箭头会显示异常

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