Vue轮播图:带有vuejs组件的轮播引导(vue carousel)

目前我正在使用 Carousel 创建一个组件与指标GetBootstrap Carousel With indicators 我在一个 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" :alt="image.name">
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" xxx="#carouselExampleIndicators" role="on" 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" xxx="#carouselExampleIndicators" role="on" 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>

enter image description here

目前第一个图像显示,但其他图像没有显示,滑块也不工作。

为什么?我做错了什么?

这里是代码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" :alt="image.name" />
  </div>
</div>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(704)
形象美cc棒怎么样:斯威夫特 {}()怎么样(swift 意味)
上一篇
Cr批量渲染:CRLF LF和CR换行符类型之间的区别
下一篇

相关推荐

  • comeandgetyourlove音乐爱就在你身边

    Come and Get Your Love是一首热门的歌曲,由美国摇滚乐队Redbone演唱。这首歌曲于1974年发行,被收录在他们的专辑《Wovoka》中。歌曲以放克曲风为主,旋律活泼,曲调悠扬,歌词朗朗上口,深受歌迷喜爱。…

    2023-06-29 07:47:31
    0 28 91
  • css预编译器: center;}

    CSS预编译器是一种用于构建CSS的工具,它可以将CSS代码转换为更易于管理和维护的格式。它们可以使CSS代码更加灵活,更易于重用,并且可以帮助开发人员更轻松地组织和管理CSS代码。…

    2023-04-30 05:19:08
    0 19 68
  • python中predict函数参数:如何使用Python的predict函数进行机器学习预测

    示例示例predict函数是scikit-learn中的一个函数,用于预测新样本的输出结果。参数:…

    2023-03-30 08:03:12
    0 74 21
  • canvas 官网Bring Your Ideas to Life with Creative Artwork

    Canvas 官网是一个用于创建图形的 HTML5 API,它可以在浏览器中使用 JavaScript 来绘制 2D 图形。它提供了一个可以在网页上绘制图形的强大工具,可以用来创建动画、游戏、数据可视化等。…

    2023-02-28 09:52:08
    0 23 63
  • qt creator快速入门 第3版 pdf从零开始

    Qt Creator快速入门第3版是一本关于Qt Creator的教程书,旨在帮助读者快速掌握Qt Creator的使用。书中介绍了Qt Creator的基本功能,如如何创建项目、编辑代码、调试代码以及创建应用程序等等。书中还提供了一些实例代码,帮助读者更好地理解Qt Creator的用法。…

    2023-05-16 03:03:33
    0 93 31
  • cherry键盘win键不能用:解决Cherry键盘Win键无法使用的措施

    如果您的cherry键盘win键不能用,可能是由于系统设置问题导致的。下面提供一些代码,可以帮助您解决这个问题:打开“控制面板”,然后点击“硬件和声音”,打开“键盘”选项卡。…

    2023-08-27 03:36:33
    0 13 80
  • certificate意思一步一步指南

    示例示例是一种用于证明某个人或机构拥有某种资格或资质的文件。它可以是一种认证,也可以是一种奖励或认可。代码示例:…

    2023-09-14 15:01:58
    0 50 73
  • win10系统ctrl加c不能复制:解决win10系统下Ctrl+C不能复制的问题

    解决方案解决方案答:可能是由于系统快捷键被修改所导致的,可以尝试恢复系统默认快捷键;…

    2023-04-15 00:45:32
    0 29 12

发表评论

登录 后才能评论

评论列表(48条)