无法显示

[f4xy]

首现感谢提供如此轻量的走马灯。按照你提供的example，可以完整显示，但一旦使用自己的数据，就无法显示。
希望有空帮忙测试下，谢谢。

<script setup>
import { Head } from '@inertiajs/vue3';
import AppLayout from "@/Layouts/AppLayout.vue";

defineProps({
    features: Object
})
</script>

<template>
    <AppLayout>
        <div class="py-2">
            <DCarousel>
                <div v-for="feature in features"  class="carousel-item">
                    <img src="https://pic.imgdb.cn/item/61f2ae9a2ab3f51d91000f53.jpg"  alt=""/>
                </div>
            </DCarousel>
        </div>
    </AppLayout>
</template>

<style>
.carousel-item {
    text-align: center;
    line-height: 200px;
    background: #f3f6f8;
}
</style>

[kagol]

@f4xy 好的，明天我试试，features 的数据可否提供下呢？

[f4xy]

我的features是测试数据，如下：

[
    {
        "thumbnail": "https://i.ytimg.com/vi/YzsTdLIcbzU/hqdefault.jpg"
    },
    {
        "thumbnail": "https://i.ytimg.com/vi/s_nc1IVoMxc/hqdefault.jpg"
    },
    {
        "thumbnail": "https://i.ytimg.com/vi/MoN9ql6Yymw/hqdefault.jpg"
    },
    {
        "thumbnail": "https://i.ytimg.com/vi/pjyN3rOhJl4/hqdefault.jpg"
    }
]

[kagol]

我的features是测试数据，如下：

[
    {
        "thumbnail": "https://i.ytimg.com/vi/YzsTdLIcbzU/hqdefault.jpg"
    },
    {
        "thumbnail": "https://i.ytimg.com/vi/s_nc1IVoMxc/hqdefault.jpg"
    },
    {
        "thumbnail": "https://i.ytimg.com/vi/MoN9ql6Yymw/hqdefault.jpg"
    },
    {
        "thumbnail": "https://i.ytimg.com/vi/pjyN3rOhJl4/hqdefault.jpg"
    }
]

好的

[f4xy]

哇，早上好
确切的表达就是，从example改使用v-for的一瞬间还正常，刷新一下就不显示图片了，再次刷新整个组建都无法显示。

[kagol]

@f4xy 已解决该问题，并发布新版本：@kagol/vue-carousel@0.1.2

[kagol]

@f4xy 你可以按照以下方式尝试下：

<script setup lang="ts">
const features = [
    {
        "thumbnail": "https://i.ytimg.com/vi/YzsTdLIcbzU/hqdefault.jpg"
    },
    {
        "thumbnail": "https://i.ytimg.com/vi/s_nc1IVoMxc/hqdefault.jpg"
    },
    {
        "thumbnail": "https://i.ytimg.com/vi/MoN9ql6Yymw/hqdefault.jpg"
    },
    {
        "thumbnail": "https://i.ytimg.com/vi/pjyN3rOhJl4/hqdefault.jpg"
    }
]
</script>

<template>
  <Carousel style="width: 480px;">
      <div v-for="feature in features"  class="carousel-item">
          <img :src="feature.thumbnail"  alt=""/>
      </div>
  </Carousel>
</template>

<style>
.carousel-item {
  text-align: center;
  line-height: 200px;
  background: #f3f6f8;
}
</style>

效果如下：

[f4xy]

谢谢，正常工作了。
如果这个插件不全局挂载，能单页面直接引用，加上css响应式就完美了。