如何使用Bootstrap-Vue Carousel显示多个项目？
Bootstrap-Vue是一个基于Bootstrap和Vue.js的开源前端框架，它提供了一系列的组件和工具，可以帮助开发者快速构建响应式的Web应用程序。
要使用Bootstrap-Vue Carousel显示多个项目，可以按照以下步骤进行操作：
- 首先，确保你已经引入了Bootstrap和Vue.js的相关文件。可以通过CDN链接或者本地文件引入。
- 在Vue组件中，导入Bootstrap-Vue Carousel组件。可以使用以下代码进行导入：
import { BCarousel, BCarouselSlide } from 'bootstrap-vue'- 在Vue组件的
template中，使用b-carousel和b-carousel-slide标签来创建Carousel组件。可以使用以下代码进行创建：
<b-carousel>
<b-carousel-slide caption="Slide 1">
<!-- Slide 1 内容 -->
</b-carousel-slide>
<b-carousel-slide caption="Slide 2">
<!-- Slide 2 内容 -->
</b-carousel-slide>
<b-carousel-slide caption="Slide 3">
<!-- Slide 3 内容 -->
</b-carousel-slide>
</b-carousel>在上述代码中，每个b-carousel-slide标签代表一个Carousel的项目。你可以根据需要添加更多的项目。
- 可以通过设置
interval属性来控制Carousel项目之间的切换时间间隔。例如，设置interval为5000表示每隔5秒切换到下一个项目：
<b-carousel interval="5000">
<!-- Carousel 项目 -->
</b-carousel>- 如果需要显示导航箭头和指示器，可以设置
controls和indicators属性为true。例如：
<b-carousel controls indicators>
<!-- Carousel 项目 -->
</b-carousel>- 如果需要自动播放Carousel项目，可以设置
autoplay属性为true。例如：
<b-carousel autoplay>
<!-- Carousel 项目 -->
</b-carousel>以上就是使用Bootstrap-Vue Carousel显示多个项目的基本步骤。根据实际需求，你可以根据Bootstrap-Vue的文档进一步定制Carousel的样式和功能。
推荐的腾讯云相关产品：腾讯云对象存储（COS），它是一种高可用、高可靠、低成本的云端存储服务，适用于存储和处理各种类型的媒体文件。你可以通过以下链接了解更多关于腾讯云对象存储的信息：腾讯云对象存储（COS）
请注意，以上答案仅供参考，具体实现方式可能因个人需求和环境而异。
相关·内容
在带有bootstrap-vue的vue项目中，我搜索了一下select组件是如何工作的https://bootstrap-vue.js.org/docs/components/form-select/，没有看到它有任何过滤选项吗？如果没有，还有没有其他带筛选选项的bootstrap-vue选择组件/库？ "bootstrap-vue": "^2.1.0"
"vue": "^2.6.10" 谢谢!
浏览 33提问于2020-01-25得票数 3
回答已采纳
Webpack包分析器显示，引导-vue软件包的图标大小为535 in。
我不想在一个项目中使用它们，所以我一直试图用webpack的IgnorePlugin来排除这个包。
根据中的示例，我尝试过这样写：
new webpack.IgnorePlugin({
resourceRegExp: /^icons(.*)$/,
contextRegExp: /^bootstrap-vue(.*)$/
})
但是它没有t work. The only thing I was able to reproduce, is to completely exclude b
浏览 1提问于2020-07-13得票数 3
回答已采纳
我正在使用Vue.js。我想将Bootstrap-vue附加到我的项目中，但是它不能正常工作。当我附加BootstrapVue时，显示的是黑色屏幕，任何功能都不会执行。有人能告诉我如何解决这个问题，把Bootstrap附加到我的项目中吗？
浏览 5提问于2022-05-31得票数 1
我创建了两个Vuejs项目。第一个main.js看起来是这样的：
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.config.productionTip = false
new Vue
浏览 0提问于2019-02-01得票数 2
回答已采纳
我正在kentico 9上实现一个bootstrap 3 carousel，如果可能的话，我需要一些帮助来自动隐藏carousel控件(包括圆形指示器和下一个/上一个箭头)。
我为carousel设置了一个新的页面类型，其中每个横幅都是内容树中/hero/文件夹下的一个页面。然后使用了两个中继器:第一个中继器显示圆形指示器；第二个中继器显示横幅信息。一切都运行良好。
下面是指示器中继器的设置：
Content before: <ol class="carousel-indicators">
Content after </ol>
Item transfo
浏览 16提问于2016-09-02得票数 0
回答已采纳
我正试图在我的幻灯片图像上添加一层滤色器。我正在使用bootstrap-vue/webpack来开发我的展示网站。我的组件中的代码是：
HTML：
<b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#f85752"
:int
浏览 0提问于2018-06-29得票数 1
我有一个laravel项目，我添加了引导- vue 包，我按照指导如何设置，然后我使用的错误是"vue"："^2.6.10"，对于引导v2.0.0-rc.17。
我的webpack.mix.js，这是代码
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
此错误将显示在控制台中
浏览 0提问于2019-04-08得票数 4
回答已采纳
2回答
我有一个模型，我在那里显示了一些图像显示在owlCarousel div中。但问题是，当我关闭模型，并再次打开它。然后将这些图像附加到以前的图像中。所以我想做一些事情来清除以前的模型中的所有项目，并恢复owlCarousel。我试过：
var $carousel = $(".edit-manage-carousel");
for (var i =0; i<100; i++) {
$carousel.trigger('remove.owl.carousel', i );
}
浏览 0提问于2017-04-24得票数 1
回答已采纳
1回答
fullpage.js滑块的问题
、、、、
我被困在这个问题上已经好几个小时了，我似乎在网上找不到答案。我正在开发一个vue-cli应用程序，我正在使用fullpage.js组件和vue.js。我试图创建一个景观滑块在一个部分。到目前为止，我遵循了有关该文档的说明：
但是滑块不起作用。
以下是我的main.js：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vu
浏览 0提问于2018-09-15得票数 1
我正在尝试将引导程序与我的vue项目集成起来，但是当我打开浏览器时，我的控制台会出现以下错误。
config.js?228e:8 Uncaught TypeError: Cannot read property 'prototype' of undefined
at eval (config.js?228e:8)
at Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3262)
at __webpack_require__ (app.js:854)
浏览 2提问于2020-10-06得票数 3
我有一个动态添加项目的owl carousel，每个项目都包含一个remove按钮。
当我点击这个按钮时，我想要获取父carousel项的itemindex来调用我的carousel的remove事件。
如何检索此索引？
我真的需要我的按钮的父项的项目索引，因为许多转盘项目一次显示，而我不想要‘当前项目索引’
我尝试过的：
//retrieve parent item of clicked button
var owlitem = $(this).parents('.owl-item');
var index = $('.owl-carousel').data
浏览 10提问于2019-08-17得票数 0
1回答
我试图创建一个旋转木马使用Onsen，很容易，但我希望目前选定的项目是一个在中心。
我将5个项目的初始索引设置为2，项目宽度设置为30%。这允许显示多个项，第三个项是最初选定的项。有没有人对如何使选定的项目始终显示为中间的项目有任何想法？
我也将把这个变成一个无限的旋转木马，这不应该太棘手，但它可能是要记住的东西。
基本代码在下面..。谢谢。
<ons-carousel modifier="brand-carousel direction="horizontal" item-width="30%" initial-index="2"
浏览 1提问于2016-02-17得票数 1
回答已采纳
我想在顶部添加第二个旋转木马，在英雄之前，一个区别是它应该是多项目，但只显示一个项目。
也许是因为更大的旋转木马，每张幻灯片只显示一个项目。
引导程序4
<div class="container-fluid mt-5">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 mb-4">
<div class="cont
浏览 2提问于2020-10-08得票数 0
我用的是vue.js、webpack、npm和jQuery。现在我想在我的项目中包含框架bootstrap-vue。我通过npm遵循了https://bootstrap-vue.js.org/docs的指南，并包含了bootstrap-vue。在启动npm的构建过程时，我收到了太多使用babel运行时的错误，比如： ERROR in ./node_modules/bootstrap-vue/es/utils/popover.class.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/typeo
浏览 26提问于2019-02-18得票数 3
回答已采纳
1回答
我看到这个问题已经被问到了，但是解决方案对我来说就是不起作用。我的系统中有以下项目： <div class="owl-carousel">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div class="blog-carousel owl-carousel">
浏览 10提问于2020-04-30得票数 0
我有一个Vue项目，当我查看文件index.html时，我得到一个空白页面，当我转到浏览器控制台时，我看到错误
GET file:///dist/build.js net::ERR_FILE_NOT_FOUND
这是在我的main.js中
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
import 'bootstrap/dist/css/bootstrap.
浏览 0提问于2019-05-19得票数 2
当我构建我的nuxt.js项目时，它显示出友好的错误，这并不友好。我已经进行了全新安装(删除了package.lock和node_modules)，安装了core-js@2和@babel/运行时-corejs2，但仍然收到这些错误。 ERROR Failed to compile with 4 errors friendly-errors 11:29:16
These dependencies were not found: friendly-errors 11:29:16
浏览 86提问于2019-05-02得票数 1
回答已采纳
1回答
设置引导转盘
、、、、
我正在使用single bootstrap carousel，并且面临一个问题。轮播有几个项目/图像要显示，并且其中一个项目必须是活动项目。代码如下： <div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="**active item**">…</div>
<div class=
浏览 13提问于2021-01-06得票数 0
我想在google会话响应中显示一个带有基本卡片()列表的旋转木马。我查看了富响应()，它只允许其中的一张基本卡。
我想用基本卡代替旋转木马的原因很简单。当我点击旋转木马选项时，它将继续进行下一次对话，但是使用基本卡，我将被重定向到外部链接，这正是我所需要的。
我正在使用下面的代码在旋转木马中显示一个项目列表(选项)，用于当前的聊天响应。任何建议和帮助都很感谢
let carousel = app.buildCarousel()
// carousel.addSimpleResponse();
products_raw.forEach(funct
浏览 3提问于2017-12-04得票数 0
回答已采纳
1回答
我在一个项目中使用bootstrap-vue modals，不希望它们是可拖拽的。 我在谷歌上搜索过了，但我对new开发还是相当陌生的，所以我对没有vue的bootstrap的解决方案感到有点不知所措。 我认为示例代码不是必需的，因为我使用的是标准的bootstrap-vue模态。如果我说错了请告诉我。 您能提供一些bootsrap-vue的示例或解释如何使用仅引导解决方案吗？ 谢谢
浏览 36提问于2019-07-04得票数 2
我试图在Vue-JS 3项目中使用引导-Vue，但是我遇到了一个错误。
使用npm运行服务
在我的浏览器里
浏览器上的错误
我在终端中使用了这个命令
npm install vue bootstrap bootstrap-vue
这是我的main.js代码
import { createApp } from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstr
浏览 17提问于2022-08-07得票数 0
回答已采纳
1回答
当尝试使用Vuex、Vue、TypeScript和babel将Boostrap添加到我的项目中时，我在浏览器中会出现错误。
再生产
docker run -it --rm -p 8080:8080 node:17.7.2-alpine
yarn global add @vue/cli
vue create my_app
vue add bootstrap-vue
在成功的yarn serve之后，我在borwser中得到了这个错误
app.js:953 Uncaught TypeError: Cannot read properties of undefined (reading 'p
浏览 3提问于2022-03-26得票数 0
回答已采纳
2回答
我试图将一个Carousel组件封装在映射对象数组周围，作为该组件的子对象。目前，我只能让映射创建映射对象的一个子对象。
旋转木马需要这样做：
<Carousel>
<div>1</div>
<div>2</div>
<div>3</div>
</Carousel>
但在这个问题上不能正常工作
<Carousel>
<div>
<div>1</div>
<div>2</d
浏览 7提问于2021-03-04得票数 2
回答已采纳
1回答
停止在旋转木马中循环
、、、
我有一个物质CSS旋转木马，我想停止循环后，它到达最后一个项目，而不是返回到第一个项目，它应该显示一条消息。类似地，当我回击时，它应该显示一条消息，而不是进入最后一项。
<div class="carousel carousel-slider center" data-indicators="true">
<div class="carousel-fixed-item center">
<a class="btn waves-effect white grey-text darken-t
浏览 1提问于2017-11-25得票数 0
回答已采纳
所有人， 如何使用ant design (NG-Zorro)旋转木马在每个页面上显示多个项目。https://ng.ant.design/components/carousel/en 我想展示这样的东西--多个项目 https://ng.ant.design/components/carousel/en
浏览 109提问于2018-12-20得票数 2
我初始化了一个基于和 ()的项目，我不知道如何将我的自定义SCSS文件添加到这个项目中。
我创建了src/assets/scss/app.scss文件，并将import './assets/scss/app.scss'添加到src/main.js文件中：
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App'
import router from './router'
import 'boo
浏览 0提问于2018-10-13得票数 0
我想在bootstrap-vue b表中显示多个项目。堆叠的桌子可以做到这一点吗？该文档仅显示具有单个项目的堆叠表的示例。 我该如何指定字段或项目？这不起作用。这段代码创建了一个包含两列(列标题在左侧，值在右侧)的堆叠表。不是在表的左半部分并排显示这两个项目，而是重复列标题，并且所有内容都组织在相同的两个垂直列中。 <template>
...
<b-table
small
stacked
:fields="fooParameters"
:items="foos"
:
浏览 18提问于2020-08-05得票数 1
2回答
有什么建议吗？
、、、
我正在开发一个由ant设计(antd)库进行的reactjs项目。我想在我的项目中使用Carousel组件。当我将内容-which的背景色显示在旋转木马- to #FFF中时，子弹导航按钮就会消失。我该如何改变子弹的颜色？这是一个普通的旋转木马：
import { Row, Col, Carousel } from 'antd';
export default class Temp extends Component {
render(){
return (
<Carousel vertical autoplay>
<div>{t
浏览 0提问于2018-08-10得票数 2
回答已采纳
1回答
我使用bootstrap-vue设置了一个转盘。我使用了一个for循环和一个对象数组来动态创建组件。在每张幻灯片中，我将包括一个文本以及一个背景图像。我能够动态地呈现文本。然而，背景图像只出现在第一张幻灯片上。对于后续幻灯片，将不再渲染图像。什么地方出问题了？下面是我的代码和结果的截图 更新:我仍然不能让它工作。有谁可以帮我？ <template>
<div>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="400
浏览 31提问于2019-05-04得票数 0
1回答
我正在做一个Django项目，管理员可以上传英雄横幅到网站，也可以上传通知到网站的主页。因此，我为列出这两个HeroListView和NotificationListView创建了列表视图。但是第二个没有出现在页面中。请告诉我如何解决这个问题。
这是models.py文件
from django.db import models
class Hero(models.Model):
image = models.ImageField(upload_to="heros/")
class Notification(models.Model):
notification
浏览 1提问于2022-04-01得票数 0
回答已采纳
我正在尝试使用Bootstrap-vue表。我正在尝试添加一个列“图表”，我可以在图表中显示数据。类似于：
我对"graph“类型的图表感兴趣(图像中没有显示)。是否可以使用Bootstrap-vue表完成此操作？
浏览 1提问于2020-08-02得票数 0
我的owl-carousel在完成加载之前垂直显示项目。加载完滑块后，我该如何修复它？*我正在使用owl-carousel 2谢谢。
浏览 0提问于2018-07-18得票数 0
我有三个卡片项目的卡片布局，如果我点击从其他视图与第二卡项目，然后我想显示第二卡项目，但不能游泳的正面，只有斯威普背面与两张卡的第一和第三。
以下是我的代码：
Ext.define('MyApp.view.Main', {
extend: 'Ext.carousel.Carousel',
requires: ['Ext.TitleBar'],
alias: 'widget.mainmenuview',
config: {
layout: {
type: 'card',
},
in
浏览 2提问于2013-07-25得票数 1
回答已采纳
我正在开发一个chrome扩展，并在我的Vue文件上使用Bootstrap-Vue。目前，我将bootstrap/bootstrap-vue导入到我的js文件中，但这会导致样式在全局级别上发生。理想情况下，我希望有一种方法使bootstrap只作用于我插入的文件。有没有办法在Vue文件的部分做到这一点？ //在.js文件中 import VModal from 'vue-js-modal'
import BootstrapVue from 'bootstrap-vue'; //我在Vue文件中尝试过，但没有显示任何效果 <style scoped sr
浏览 25提问于2019-05-24得票数 3
我在代码中使用Bootstrap 4旋转木马。但它显示了所有的三个图像，我正在使用的个别项目，在一个项目中一次。以下是代码：
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
浏览 3提问于2019-02-10得票数 0
回答已采纳
使用bootstrap-vue，我列出了项目，并且我需要在大型设备中将项目分成2列。看起来像 <b-container fluid="sm" v-for="nextAd in ads" :key="nextAd.id">
<div style="border: 2px dotted green">
{{ nextAd.id }}=>{{ nextAd.title }}
</div>
</b-container>
浏览 14提问于2020-01-23得票数 0
回答已采纳
在我的VueJS应用程序中使用bootstrap-vue，我想在一行中放置一个按钮和一个警告，两个项垂直居中对齐。
正如您在此中看到的，按钮是对齐的，但警报没有对齐。
如何对齐所有项目？
浏览 1提问于2020-12-23得票数 0
在YUI Carousel中，我希望导航按钮包括prev和next按钮显示在items.by默认的下面，这些按钮放在上面的项目中，我想把它们放在项目(或图像)之后
<div id="container">
<ol id="carousel">
<li>
1111111
</li>
<li>
浏览 0提问于2012-06-11得票数 1
回答已采纳
2回答
我试着用旋转木马。
根据上面的图像，我尝试设置一个旋转木马，但它不会自动改变。如果我使用响应的布局，它是自动改变，但它只显示一个项目的时间。
<amp-list id="list_id" width="350" height="150" layout="flex-item"
src="somesrc">
<template type="amp-mustache">
<amp
浏览 2提问于2019-12-13得票数 1
回答已采纳
2回答
我想在TYPO3的前端并排显示两项旋转木马，但现在只能显示一项。
我不知道如何在HTML文件中用流体编写一些代码来显示两项内容。我现在使用一个插件bootstrap_package和bild，一个像bootstrap_packgae旋转木马一样的旋转木马。但是bootstrap_package的旋转木马只是幻灯片上的一个项目。
但是，我想在一个页面上显示两个项目，如果用户单击一个按钮(预览或下一个)，将显示另一个项目。我的形象是这样的：
现在，我在HTM文件CarouselStartseiteAngebote.html (在模板中)中的代码看起来是这样的：
<f:if condit
浏览 9提问于2022-06-30得票数 0
回答已采纳
我是jQuery的新手。我有以下代码：
jQuery(document).ready(function() {
jQuery('#carousel').jcarousel();
});
它只适用于带有id="carousel"的第一个ul，而不适用于其他的。如何将其应用于具有相同ID的所有元素？
HTML：
<!-- jQuery applies to this div -->
<div id="slideshow-carousel">
<ul id="carousel" class=
浏览 0提问于2013-01-11得票数 2
回答已采纳
1回答
我正在一个基于PHP的网站上工作，它使用的是Twitter 2。我从MySQL数据库中提取用户，并试图在屏幕上以多帧/多个旋转木马项目显示用户，而不是使用while循环显示单个项目。
这就是我的旋转木马目前的样子，因为您会注意到用户5不应该以现在的方式出现，只有当我单击旋转木马右侧的箭头时才会出现。
这就是我的php代码的样子。
<div class="carousel slide" id="myCarousel">
<h4 class="carousel-title">Text title&
浏览 3提问于2014-05-22得票数 3
回答已采纳
我用Bootstrap3旋转木马做了一个静态幻灯片，效果很好，我的目标是让它变得动态。我真的不能确定图片没有显示，而字幕显示了。
这个html直接在body标签下面，在任何其他内容之前，如所指定的：
<div class="carousel slide carousel-fade" data- ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
浏览 17提问于2017-07-20得票数 1
回答已采纳
我使用的是WebStorm 2017.2.4和webpack Vue.js项目。我已经将添加到我的项目中，并希望看到有关它和组件支持的提示。
但是我得到了“未知的html标签”的警告。
顺便说一句: bootstrap-vue在运行项目时按预期工作。
你有什么建议如何让它工作吗？
浏览 1提问于2017-09-15得票数 25
我正在尝试使用cshtml在MVC中编写一个carousel图像滑块，图片只显示在一个垂直的行中，而不是填充到Carousel滑块本身吗？
以下是我到目前为止所尝试的：
Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
@Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
产品
<script src=&#
浏览 1提问于2015-05-08得票数 0
我有一个vuejs项目，它已经安装了引导程序。我正在使用html，css项目，并转换成vuejs，其中使用引导类。但是，下拉引导类不能工作--例如，下面的类在单击showing时不会添加它，而普通的html文件则显示showing。
下拉-切换下拉菜单
我有过
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"@popperjs/core": "^2.11.5",
有人能提点建议吗？
谢谢
浏览 9提问于2022-05-24得票数 1
回答已采纳
第一次尝试使用，但在编译资产时遇到了问题。当我运行npm run watch时，我得到了一个错误，如下所示。
Module parse failed: C:\projects\portfolio\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (110:8)
You may need an appropriate loader to handle this file type.
| },
| methods: {
| ...clickOut.methods,
|
浏览 0提问于2017-08-17得票数 0
1回答
我们可以在Carousel中使用链接吗。我想向用户显示项目列表。每个项目都将包含标题、图像和描述。现在，当用户点击任何项目图像时，它应该会触发一个用户查询，比如项目标题，当用户点击描述中的链接时，它应该被重定向到web。 换句话说，我想对每个列表项同时使用Carousel和Browsing Carousel功能。 有没有类似的东西？
浏览 16提问于2019-09-22得票数 0
1回答
我在一个100%宽的中有六个项目。当屏幕处于纵向时，我只想显示3个项目，所以我使用媒体查询删除了3个项目(这里是完整的jfiddle )：
@media all and (orientation:portrait) {
.wrapper4 .carousel1{
display: none;
}
.wrapper4 .carousel3{
display: none;
}
.wrapper4 .carousel6{
display: none;
}
}
这3个项目将消失，但它们占据的空间仍将
浏览 2提问于2016-01-24得票数 0
我正在为一个项目使用bootstrap-vue table，但在没有文档的情况下遇到了一个问题。 如何一次切换1行详细信息？ 这里有一个完整的表示例，其中包含here上的数据
浏览 14提问于2019-10-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
