带有 vue js 组件的轮播引导程序
Posted
技术标签:
【中文标题】带有 vue js 组件的轮播引导程序【英文标题】:Carousel bootstrap with vue js component 【发布时间】:2022-01-19 00:02:36 【问题描述】:目前我正在使用带有指示器 GetBootstrap Carousel With indicators 的 Carousel 创建一个组件 我正在一个 vue 组件中实现此代码,例如:
<template>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<div v-for="(image, index) in images" :key="index">
<li data-target="#carouselExampleIndicators" :data-slide-to="index" :class=" index === 0? 'active' : '' "></li>
</div>
</ol>
<div class="carousel-inner">
<div v-for="(image, index) in images" :key="index">
<div :class=" index === 0? 'carousel-item active' : 'carousel-item' ">
<img class="d-block w-100" :src="image.path" :>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</template>
<script>
export default
props: ["app_route"],
data()
return
images: [],
;
,
mounted: function()
this.getItemsSlider();
,
methods:
getItemsSlider()
axios
.get(this.app_route + "/admin/slider/list",
)
.then((response) =>
//console.log("response: ", response.data);
this.images = response.data;
);
,
;
</script>
目前第一张图片正在显示,但其他图片没有显示,滑块也不工作。
为什么?我做错了什么?
这里是代码codesandbox
【问题讨论】:
【参考方案1】:根据the documentation,必须严格嵌套元素.carousel-inner > .carousel-item
。
你应该试试这个:
<div class="carousel-inner">
<div v-for="(image, index) in images" :key="index" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
<img class="d-block w-100" :src="image" : />
</div>
</div>
【讨论】:
是的!是工作!!!非常感谢!以上是关于带有 vue js 组件的轮播引导程序的主要内容,如果未能解决你的问题,请参考以下文章