为 vuetify carousels 中的每张幻灯片设置不同的时间间隔答案

【问题标题】：Set different time interval for each slide in vuetify carousels为 vuetify carousels 中的每张幻灯片设置不同的时间间隔
【发布时间】：2020-03-13 07:32:52
【问题描述】：

我需要在 Vuetify 轮播中为每个 v-carousel-item 设置不同的时间。

【问题讨论】：

您应该提供一些您尝试过的示例代码。

标签： vue.js carousel vuetify.js

【解决方案1】：

诀窍是更新传递给轮播的响应属性，并使用@input 事件来检测幻灯片，如下所示：

<!-- TEMPLATE -->
<v-carousel cycle :interval="interval" @input="onSlideChange">
    <v-carousel-item :key="1">First Item</v-carousel-item>
    <v-carousel-item :key="2">Second Item</v-carousel-item>
</v-carousel>

事件处理程序将在每次幻灯片更改时更新属性interval：

const instance = new Vue({

    data() {
        // Use default interval of 1000ms
        return {
            interval: 1000
        }
    },

    methods: {

        onSlideChange(slideNumber) {
            if (slideNumber === 1) {
                this.interval === 500;
            } else if (slideNumber === 2) {
                this.interval === 800;
            } else {
                this.interval === 1000;
            }
        }
    }
});

【讨论】：

@Ashok 如果它解决了您的问题，请考虑接受答案为是。
只有一个问题，当我嵌入 Youtube 视频时，即使在幻灯片更改后它仍会在后台播放。您有什么想法，我们该如何解决？
@Ashok，这是组件的行为！它必须使用display: none 或玩visibility/opacity 来创建轮播效果。具有视频的幻灯片组件并没有真正被破坏。当幻灯片未激活时，您必须绕过它，从幻灯片组件中删除视频播放器。您可以使用相同的事件处理程序。