我想在Vue.js的组件中为Bootstrap 4的轮播运行轮播间隔功能。当我粘贴到index.html中的脚本标签时,它可以工作。但是我不能在组件中运行。我该如何运行?
我在这里提到的代码:
$(".carousel").carousel({
interval: 200
});
<template>
<div
id="slider-1"
class="carousel slide pull-full-screen"
data-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../images/slides/cycling.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../images/slides/diving.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../images/slides/parachuting.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</template>
最佳答案
尝试将此语句放入mounted
挂钩中,如下所示:
mounted(){
$(".carousel").carousel({ interval: 200 });
}
检查
this codepen sample