当前位置：首页 > VUE

vue 引入bootstrap实现轮播

2026-01-22 18:48:35VUE

在 Vue 中引入 Bootstrap 实现轮播

安装 Bootstrap 和依赖

通过 npm 或 yarn 安装 Bootstrap 及其 Vue 适配库：

npm install bootstrap @popperjs/core
npm install bootstrap-vue

全局引入 Bootstrap

在 main.js 或入口文件中全局引入 Bootstrap 样式和组件：

vue 引入bootstrap实现轮播

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

使用轮播组件

在 Vue 模板中直接使用 Bootstrap 的轮播组件：

vue 引入bootstrap实现轮播

<template>
  <div id="app">
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="image1.jpg" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
          <img src="image2.jpg" class="d-block w-100" alt="Slide 2">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>
</template>

动态绑定轮播数据

通过 Vue 的 v-for 动态渲染轮播项：

<script>
export default {
  data() {
    return {
      slides: [
        { id: 1, src: 'image1.jpg', alt: 'Slide 1' },
        { id: 2, src: 'image2.jpg', alt: 'Slide 2' }
      ]
    }
  }
}
</script>

模板部分调整为：

<div class="carousel-inner">
  <div 
    v-for="(slide, index) in slides" 
    :key="slide.id"
    class="carousel-item"
    :class="{ active: index === 0 }"
  >
    <img :src="slide.src" class="d-block w-100" :alt="slide.alt">
  </div>
</div>